:root {
    --color-naranja-linntae-dark: #A34700;
    --color-naranja-linntae: #f26700;
    --color-naranja-linntae-90: #FF892E;
    --color-naranja-linntae-80: #FFA35C;
    --color-naranja-linntae-70: #FFBD8A;
    --color-naranja-linntae-60: #FFD7B8;
    --color-naranja-linntae-50: #FFF1E6;

    --color-azul-linntae-dark: #061B42;
    --color-azul-linntae: #08265c;
    --color-azul-linntae-90: #0D3D96;
    --color-azul-linntae-80: #114EC0;
    --color-azul-linntae-70: #145FEB;
    --color-azul-linntae-60: #3F7CEE;
    --color-azul-linntae-50: #6999F2;
    --color-azul-linntae-40: #93B6F6;
    --color-azul-linntae-30: #BDD2F9;
    --color-azul-linntae-20: #E8EFFD;
    --color-azul-linntae-10: #f5f6fa;
    --color-azul-linntaesvg: #2d4e8c;

    --color-verde-linntae-dark: #00754A;
    --color-verde-linntae: #00a86b;
    --color-verde-linntae-90: #00D184;
    --color-verde-linntae-80: #00FFA2;
    --color-verde-linntae-70: #2EFFB2;
    --color-verde-linntae-60: #5CFFC3;
    --color-verde-linntae-50: #8AFFD4;
    --color-verde-linntae-40: #B8FFE5;
    --color-verde-linntae-30: #E6FFF6;

    --color-blanco: #fff;

    --header-height: 80px;

    --fs-16: 1rem;
    --fs-14: 0.875rem;
    --fs-12: 0.75rem;

    --size-screen-small: 1366px;
}


html {
    scroll-behavior: smooth;
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    background: url("../img/svg/fondo-linntae.svg"), var(--color-azul-linntae-dark) !important;
}


/* Header & Navigation */

/*.content-section{*/
/*    height: 100vh;*/
/*}*/
.header-linntae {
    position: relative;
    width: 100%;
    height: var(--header-height);
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
    z-index: 99999 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.10);

    .logo {
        width: 120px;
        display: flex;

        img {
            width: inherit;
            /*max-width: 100%;*/

        }
    }

    .menu-linntae {
        color: var(--color-blanco) !important;
        padding: 0 1rem;

        .nav-links {
            display: flex;
            flex-direction: row;
            align-items: center;
            align-self: center;
            justify-content: center;
            list-style: none;
            gap: 0.5rem;

            li {
                width: max-content;

                a {
                    text-decoration: none;
                    color: var(--color-blanco) !important;
                    font-size: var(--fs-16);
                    font-weight: 400;
                    padding: 0.25rem 1rem;
                    width: max-content;

                    &:active, &:visited, &:focus, &:link {
                        color: var(--color-blanco);
                    }

                    &:hover {
                        background-color: var(--color-naranja-linntae);
                        border-radius: 1.5rem;
                    }

                    @media (max-width: 1366px) {
                        padding: 0.25rem 0.5rem;
                        font-size: var(--fs-12) !important;
                    }
                }
            }

            .dropdown {
                .dropdown-content {
                    width: max-content;

                    li {
                        width: 100%;

                        a {
                            color: var(--color-azul-linntae-dark) !important;
                            padding: 0.25rem 1rem;
                            width: 100%;
                            text-align: start;

                            &:hover {
                                background-color: var(--color-azul-linntae-20);
                                border-radius: 0rem;
                                color: var(--color-azul-linntae-dark) !important;

                            }
                        }
                    }


                }
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none !important;
                flex-direction: column;
                background: #ffffff;
                position: absolute;
                top: 80px;
                right: 0;
                width: 100%;
                text-align: left;
                /*border-width: 2px;*/
                padding: 1rem 1rem;
                /*box-shadow: 10px 2px 0px rgba(0, 0, 0, 0.219);*/
                /*z-index: 3;*/

                &.active {
                    display: flex !important;
                    flex-direction: column;
                    justify-content: start !important;
                    color: var(--color-azul-linntae) !important;
                    gap: 0.75rem;

                    a {
                        color: var(--color-azul-linntae-dark) !important;
                        padding: 0.25rem 1rem;
                        font-size: 1rem !important;

                        &:hover {
                            background-color: var(--color-azul-linntae-20);
                            border-radius: 0rem;
                            color: var(--color-azul-linntae-dark) !important;

                        }
                    }
                }
            }


            .menu-toggle {
                display: block;
                background-color: #00000000;

                color: var(--color-blanco);
                z-index: 3;
            }
        }
    }
}


.inicio {
    height: calc(100vh - (var(--header-height) + 80px));
    margin-top: 3rem;
    box-sizing: border-box;

    .fondo-icono-linntae {
        position: absolute;
        height: 100vh;
        width: 100vw;
        display: grid;
        justify-content: flex-end;
        padding-right: 10rem;
        padding-top: -5rem;

        @media (max-width: 600px) {
            display: none;
        }
    }

    @media (max-width: 1366px) {
        margin-top: 1rem;
        /*height: calc(100vh - var(--header-height));*/
        height: max-content;
    }

    @media (max-width: 600px) {
        height: max-content;
    }

    .inicio-linntae__area {
        display: grid;
        grid-template-columns: 1.5fr 1fr !important;
        padding: 1rem 10rem;
        gap: 80px;

        .hero-content {
            width: 100%;

            .title {
                font-size: 60px;

            }

            @media (max-width: 600px) {
                .title {
                    font-size: 45px;
                }

                padding-bottom: 2rem; /*border-bottom: 2px solid var(--color-verde-linntae);*/
            }
        }

        .form-container {
            position: relative;
            background-color: rgba(255, 255, 255, 0.25);
            border-radius: 1.5rem;
            backdrop-filter: blur(5px); /*padding: 1.5rem;*/
            height: max-content;
            box-shadow: inset 0 0 2px rgba(255, 255, 255, 25), 0 0 10px rgba(255, 255, 255, 0.15);
            padding: 1.5rem;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.30);
            @media (max-width: 600px) {
                height: 90vh;
            }

            .register-form-container {
                .register-title {
                    color: var(--color-blanco);
                    border-bottom: solid 1px rgba(255, 255, 255, 0.25);
                    padding-bottom: 0.5rem;
                }
            }

            h3 {
                color: var(--color-blanco) !important;
            }

            .step {
                display: flex;
                text-align: center;
                flex-direction: column;
                justify-content: center;
                justify-items: center;
                align-items: center;
                gap: 1rem;
                color: var(--color-blanco);

                h2, h3 {
                    color: var(--color-blanco) !important;
                }

                h3 {
                    font-weight: 400;
                }

                .method-option {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    background-color: rgba(255, 255, 255, 0.15);
                    padding: 15px;
                    width: 80%;
                    margin: 10px auto;
                    border-radius: 26px;
                    cursor: pointer;
                    transition: 0.3s;
                    border: 0.2px solid white;
                    box-shadow: 0 4px 30px 0 rgba(0, 0, 0,0.30);
                    color: var(--color-blanco);
                    transition: transform 0.3s ease-in-out;
                    gap: 1rem;

                    .method-option__icon {
                        width: 80px;
                        height: 80px;
                        background-color: var(--color-naranja-linntae-90);
                        border-radius: 50%;

                        display: grid;
                        place-items: center;

                        &.bg-naranja {
                            background-color: var(--color-naranja-linntae-90);
                        }

                        &.bg-verde {
                            background-color: var(--color-verde-linntae-90);
                        }

                        i {
                            font-size: 3rem;
                        }

                    }

                    .method-option__content {
                        display: flex;
                        flex-direction: column;
                        justify-content: start;
                        text-align: start;

                        h2 {
                            color: var(--color-blanco);
                        }

                        h3 {
                            font-weight: 700;
                        }
                    }


                }
                .method-option:hover{
                    transform: scale(1.1); /* Scale up by 20% on hover */
                }

                .code-inputs {
                    label {
                        display: flex;
                        flex-direction: row;
                        gap: 1rem;

                        input {
                            border: none;
                            box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.75);
                            background-color: rgba(255, 255, 255, 0.10) !important;
                            outline: none;
                            color: var(--color-blanco);
                            border-radius: 18px;
                            box-shadow: 0 4px 15px 0 rgba(0, 0, 0,0.15);
                        }
                    }
                }

                .buttons{
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);

                    @media (max-width: 600px) {
                        grid-template-columns: 1fr;
                    }

                }

            }

        }

        @media (max-width: 1366px) {
            grid-template-columns: 1.5fr 1fr !important;
            padding: 1rem 3rem;
            gap: 80px;
        }

        @media (max-width: 600px) {
            grid-template-columns: 1fr !important;
            padding: 1rem 1rem;
            gap: 0; .hero-content {
            flex: 1;
        }
        }
    }
}

.input-group {
    display: grid;
    grid-template-columns: max-content 1fr;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.50);
    border-radius: 24px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25), 0 0 16px rgba(0, 0, 0, 0.10);
    overflow: hidden; /*para que el label no se salga del borde redondeado*/
    box-sizing: border-box;
    height: 45px;
    justify-content: start;
    align-self: start;

    label {
        height: 100%;
        text-transform: uppercase;
        background-color: rgba(255, 255, 255, 0.10);
        color: var(--color-blanco);
        border-right: 1px solid rgba(255, 255, 255, 0.25);
        @media (max-width: 1366px) {
            font-size: 0.75rem !important;
        }
    }

    input,
    select,
    .filter-select-wrap {
        align-self: center;
        height: 100%;
        width: 100%;
        outline: none;
        background-color: transparent;
        color: var(--color-blanco);

        .filter-select-display {
            &::after {
                content: "\f107"; /* Código Unicode del icono (por ejemplo, usuario) */
                font-family: "Font Awesome 5 Free"; /* Asegúrate de usar la fuente correcta */
                font-weight: 900; /* Cambia el peso según el icono que uses */
                margin-left: 8px; /* Espaciado opcional */
                color: var(--color-blanco); /* Color del icono */
            }
        }

        @media (max-width: 1366px) {
            font-size: 0.75rem !important;
        }
    }

    select {
        padding-left: 1rem;

        option[value]:not([value=""]) {
            color: var(--color-azul-linntae);
            @media (max-width: 1366px) {
                font-size: 0.75rem;
            }
        }
    }


    .filter-select-display {
        color: var(--color-blanco) !important;
    }

    ::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    &:focus-within {
        border-color: #f97316;
        box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
    }

    #toggle-password {
        color: var(--color-azul-linntae-dark);
        font-size: 1.15rem;
    }
}


@media (max-width: 768px) {
    .logo img {
        width: 90px; /* Adjust logo size for mobile */
    }
}

@media (max-width: 768px) {
    #darkModeToggle {
        font-size: 18px; /* Make emoji bigger */
        width: 40px; /* Adjust width to fit the emoji */
        height: 40px;
        padding: 5px; /* Reduce padding */
        text-align: center;
    }

    #darkModeToggle::after {
        content: attr(data-emoji); /* Show only the emoji */
        font-size: 18px; /* Adjust emoji size */
    }

    #darkModeToggle span {
        display: none;
    }

}

/* Keyframes for Bounce Effect */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(-5px);
    }
}

/*!* Active Link Effect (Optional) *!*/
/*.nav-links li a:active {*/
/*    transform: scale(0.95); !* Slight shrink when clicked *!*/
/*}*/

/*.nav-links a {*/
/*    color: #1a3669;*/
/*    text-decoration: none;*/
/*    font-weight: bold;*/
/*}*/


/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    font-size: 30px;
    color: #000000;
    cursor: pointer;
    background-color: #70645b;


}

.hero-background-wrapper {
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    background: linear-gradient(135deg, #ffffff 0%, #fff7f2 100%);
    position: relative; /* Importante para posicionar las animaciones */
    overflow: hidden; /* Oculta cualquier parte de la animación que se salga */
    cursor: default;
}

/* 2. Capa 1: Formas Abstractas (Las "líneas") */
#hero-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Detrás de todo */
}

/* 🚀 Keyframe para la animación de entrada */
@keyframes slideIn {
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* 3. Capa 2: Iconos Flotantes */
#hero-fg-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Encima de las formas (z-index: 0) */
    /* Debajo del texto (.area tiene z-index: 1)  */
    z-index: 1;
}

.floating-icon {
    position: absolute;

    /* Estilos de la "Card Redonda" */
    width: 60px; /* Tamaño de la card */
    height: 60px; /* Tamaño de la card */
    background: #ffffff;
    border-radius: 50%; /* La hace redonda */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra para destacar */

    /* Flexbox para centrar el icono <i> de adentro */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Animación de FLOTACIÓN (la misma de antes) */
    animation: infinityFloat 10s infinite ease-in-out;
}

.floating-icon.large {
    width: 80px;
    height: 80px;
}

.floating-icon.large i {
    font-size: 36px; /* Icono más grande */
}

.floating-icon.small {
    width: 45px;
    height: 45px;
}

.floating-icon.small i {
    font-size: 18px; /* Icono más pequeño */
}

.floating-icon.dim {
    opacity: 0.7; /* Para que parezcan más lejanos */
    /* El box-shadow también debe ser más sutil */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.floating-icon i {
    font-size: 24px; /* Tamaño del icono */
    color: #f16200; /* Color naranja de tu marca */
}

/* 🚀 Keyframe para la "órbita infinita" (figura 8) */
@keyframes infinityFloat {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(20px, -15px);
    }
    50% {
        transform: translate(0, 0);
    }
    75% {
        transform: translate(-20px, 15px);
    }
    100% {
        transform: translate(0, 0);
    }
}

.hero-content h1 {
    font-size: 36px;
    color: #f26700;
    opacity: 0; /* Start invisible */
    transform: translateY(30px); /* Start slightly lower */
    animation: fadeInUp 1s ease-in-out forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.hero-content h1 span {
    font-weight: bold;
}


.subtitle {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-verde-linntae);
    margin-top: 10px;
    opacity: 0; /* Start invisible */
    transform: translateY(40px); /* Start slightly lower */
    animation: fadeInUp 1s ease-in-out forwards;
}


.description {
    font-size: 16px;
    color: var(--color-blanco) !important;
    margin-top: 10px;
}


.buttons {
    display: flex;
    flex-direction: row !important;
    @media (max-width: 600px) {
        flex-direction: column;
    }
    flex-wrap: wrap; /* Allows wrapping for different alignments */
    gap: 10px; /* Space between buttons */
    align-items: start; /* Align buttons vertically */
}

.btn,
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem !important;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 30px;
    width: 100%;
    max-width: 300px;
    min-width: 250px;
    transition: 0.3s;
    gap: 15px;
    opacity: 0; /* Start hidden */
    transform: translateY(30px); /* Start lower */
    animation: fadeInButtons 1s ease-in-out forwards;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);
    text-transform: uppercase;
    border: none;
    transition: transform 0.3s ease-in-out;

    .btn-max-content {
        width: min-content;
        max-width: max-content !important;
    }

    &.btn-naranja {
        background-color: var(--color-naranja-linntae);
        color: var(--color-blanco);
        border: solid 1px var(--color-blanco);

    }


    &.btn-verde {
        background-color: var(--color-verde-linntae);
        color: var(--color-blanco);
    }

    &.btn-azul {
        background-color: var(--color-azul-linntae-80);
        color: var(--color-blanco);
    }

    &.btn-blanco {
        background-color: var(--color-blanco);
        color: var(--color-naranja-linntae);
    }

    &.w-100 {
        width: 100% !important;
        max-width: 100%;
    }

    &:hover {
        opacity: 0.8 !important;
        transform: scale(1.1); /* Scale up by 20% on hover */
    }

    &.border-blanco{
        border: solid 1px var(--color-blanco);
    }


}

/*.google-btn {*/
/*    border: 1px solid rgb(164, 164, 164);*/
/*    border-width: 0.1px;*/
/*}*/

.btn img {
    width: 20px;
    height: auto;
    gap: 10px;

}

/* Staggered Animation: Each button appears with a slight delay */
/*.btn:nth-child(1) {*/
/*    animation-delay: 0.2s;*/
/*}*/

/*.btn:nth-child(2) {*/
/*    animation-delay: 0.4s;*/
/*}*/

/*.btn:nth-child(3) {*/
/*    animation-delay: 0.6s;*/
/*}*/

/* Keyframes for Fade-in + Slide-up Effect */
@keyframes fadeInButtons {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Effect: Bounce Effect */


/* Keyframes for Bounce Effect */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Click Effect: Slight Shrink */
.btn:active {
    transform: scale(0.95);
}

/*.btn-orange {*/
/*    background: #f26700;*/
/*    color: white;*/
/*    margin-top: 10px;*/
/*}*/

/*.btn-orange::after,*/
/*.btn-orange::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    background: linear-gradient(to right, #ff6200, #b63d00);*/
/*    color: white;*/
/*    width: 100%;*/
/*    height: 2px;*/
/*    bottom: -5px;*/
/*    left: 0;*/
/*    transform: scaleX(0);*/
/*    transform-origin: right;*/
/*    transition: transform 0.5s ease-out;*/
/*}*/

/*.btn-orange::before {*/
/*    top: -5px;*/
/*    transform-origin: left;*/
/*}*/

/*.btn-orange:hover::after,*/
/*.btn-orange:hover::before {*/
/*    transform: scaleX(1);*/
/*}*/


/*.btn-orange:hover {*/
/*    background: linear-gradient(90deg, #f16200, #b63d00 70.71%)*/
/*}*/

/*.btn-blue {*/
/*    background: #08265c;*/
/*    color: white;*/
/*    margin-top: 10px;*/
/*}*/

/*.btn-blue::after,*/
/*.btn-blue::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    background: linear-gradient(90deg, #1a3669, #9ecfff 70.71%);*/
/*    color: white;*/
/*    width: 100%;*/
/*    height: 2px;*/
/*    bottom: -5px;*/
/*    left: 0;*/
/*    transform: scaleX(0);*/
/*    transform-origin: right;*/
/*    transition: transform 0.5s ease-out;*/
/*}*/

/*.btn-blue::before {*/
/*    top: -5px;*/
/*    transform-origin: left;*/
/*}*/

/*.btn-blue:hover::after,*/
/*.btn-blue:hover::before {*/
/*    transform: scaleX(1);*/
/*}*/

/*.btn-blue:hover {*/
/*    background: linear-gradient(90deg, #2770f9, #9ecfff 70.71%);*/
/*}*/

/*.btn-green {*/
/*    background: #00a86b;*/
/*    color: white;*/

/*}*/

/*.btn-green::after,*/
/*.btn-green::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    background: linear-gradient(90deg, #00a86b, #00f2c3 70.71%);*/
/*    color: white;*/
/*    width: 100%;*/
/*    height: 2px;*/
/*    bottom: -5px;*/
/*    left: 0;*/
/*    transform: scaleX(0);*/
/*    transform-origin: right;*/
/*    transition: transform 0.5s ease-out;*/
/*}*/

/*.btn-green::before {*/
/*    top: -5px;*/
/*    transform-origin: left;*/
/*}*/

/*.btn-green:hover::after,*/
/*.btn-green:hover::before {*/
/*    transform: scaleX(1);*/
/*}*/

/*.btn-green:hover {*/
/*    background: linear-gradient(90deg, #00a86b, #00f2c3 70.71%);*/
/*}*/

/*.buttons .btn-orange,*/
/*.buttons .btn-green {*/
/*    flex: 1;*/
/*    max-width: 950px;*/
/*}*/

/*.buttons .btn-blue {*/
/*    flex: 1 1 auto;*/

/*}*/

.fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/*.buttons .google-btn {*/
/*    background: #ffffff;*/
/*    color: #f16200;*/
/*    border-width: 1px;*/
/*    border-color: #f16200;*/
/*}*/

/*.buttons .google-btn::after,*/
/*.buttons .google-btn::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    background: linear-gradient(90deg, #ea4335, #4285f4, #34a853, #fbbc05 80.71%);*/
/*    color: white;*/
/*    width: 100%;*/
/*    height: 2px;*/
/*    bottom: -5px;*/
/*    left: 0;*/
/*    transform: scaleX(0);*/
/*    transform-origin: right;*/
/*    transition: transform 0.5s ease-out;*/
/*}*/

/*.buttons .google-btn::before {*/
/*    top: -5px;*/
/*    transform-origin: left;*/
/*}*/

/*.buttons .google-btn:hover::after,*/
/*.buttons .google-btn:hover::before {*/
/*    transform: scaleX(1);*/
/*}*/

/*.buttons .google-btn:hover {*/
/*    background: conic-gradient(from -145deg, #ea4335 90deg, #4285f4 40deg 180deg, #34a853 40deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;*/
/*    color: #ffffff;*/

/*}*/

/*.google-btn:hover .fa-google {*/
/*    background: none;*/
/*    color: white;*/
/*    -webkit-text-fill-color: white;*/
/*}*/

/*.buttons .google-btn,*/
/*.buttons .btn-green {*/
/*    flex: 1;*/
/*    max-width: 950px;*/
/*}*/

/*.buttons .google-btn {*/
/*    flex: 1 1 auto;*/
/*}*/


/* 📌 Responsive Layout */
/*@media (max-width: 768px) {*/
/*    .buttons {*/
/*        flex-direction: column; !* Stack buttons on small screens *!*/
/*        align-items: center; !* Center align *!*/
/*        gap: 5px; !* Space between buttons *!*/
/*    }*/

/*    .google-btn {*/
/*        width: 90%*/
/*    }*/

/*    .btn {*/
/*        width: 90%; !* Full width on mobile *!*/
/*        max-width: 100%; !* Keep it structured *!*/
/*        gap: 6px;*/
/*    }*/


/*    .btn-green {*/
/*        margin-top: 10px; !* Add space between buttons *!*/
/*    }*/
/*}*/

/* Hero Image */
.hero-image1 {
    max-width: 50%;
    flex: 1;
    max-width: 5500px;
    position: relative;
    z-index: 2;
    width: 100%;

}

.hero-image1 img {
    width: 100%;
    border-radius: 14px;
    filter: brightness(100%);


}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-container {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.hero-image1 img .active,
.custom-card.active
.image.active {
    opacity: 1;
    transform: translateY(0)
}

@keyframes fadeInSlideX {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Waves */
.waves {
    position: relative;
    width: 100%;
    height: 850px;
    overflow: hidden;
    background: linear-gradient(45deg, #f17c55, #f29263, #f5b285, #f8d8b4);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/*.wave {*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100px;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    background-repeat: repeat-x;*/
/*}*/

/*.wave1 {*/
/*    background: url('https://storage.googleapis.com/linn-files/LinntaeWebPage/Firstpage/Waves/olafuerte.png') repeat-x;*/
/*    height: 100px;*/
/*    bottom: 0;*/
/*    animation: waveMove 5s ease-in-out 1;*/
/*}*/

/*.wave2 {*/
/*    background: url('https://storage.googleapis.com/linn-files/LinntaeWebPage/Firstpage/Waves/olafuerte.png') repeat-x;*/
/*    height: 120px;*/
/*    bottom: 0px;*/
/*    opacity: 0.7;*/
/*    animation: waveMove 5s ease-in-out 1;*/
/*}*/

/*.wave3 {*/
/*    background: url('https://storage.googleapis.com/linn-files/LinntaeWebPage/Firstpage/Waves/olafuerte.png') repeat-x;*/
/*    height: 140px;*/
/*    bottom: 0px;*/
/*    opacity: 0.5;*/
/*    animation: waveMove 5s ease-in-out 1;*/
/*}*/

/*.wave4 {*/
/*    background: url('https://storage.googleapis.com/linn-files/LinntaeWebPage/Firstpage/Waves/olafuerte.png') repeat-x;*/
/*    height: 160px;*/
/*    bottom: 0px;*/
/*    opacity: 0.3;*/
/*    animation: waveMove 5s ease-in-out 1;*/
/*}*/

/* Wave Animation */
@keyframes waveMove {
    0% {
        transform: translateY(10px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.hero-content.animated-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
    z-index: -1;
}

/* Responsive Design */

/* Tablet (768px) */
@media screen and (max-width: 1024px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-content {
        max-width: 80%;
        margin-bottom: 20px;
    }

    .hero-image1 {
        max-width: 80%;
        transform: translateY(50px); /* Slide from bottom */
        animation: fadeInSlideY 0.8s ease-in-out forwards;
    }
}

@keyframes fadeInSlideY {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/*!* Mobile (480px) *!*/
/*@media screen and (max-width: 768px) {*/
/*    .waves {*/
/*        height: 936px;*/
/*        max-height: 100%;*/
/*        min-height: 950px;*/
/*        height: auto;*/


/*    }*/


/*    nav {*/
/*        flex-direction: row;*/
/*        justify-content: space-between;*/
/*        padding: 14px;*/
/*    }*/


/*    .area {*/
/*        display: flex;*/
/*        flex-direction: column;*/
/*        gap: 40px;*/
/*        align-items: center;*/
/*        text-align: center;*/


/*    }*/


/*    .hero-content {*/
/*        flex-direction: column;*/
/*        text-align: center;*/

/*    }*/

/*    .hero-content {*/
/*        max-width: 100%;*/
/*    }*/

/*    .hero-image1 {*/
/*        flex-direction: column;*/
/*        max-width: 100%;*/
/*        animation: fadeInSlideY 0.8s ease-in-out forwards;*/
/*        transform: translateY(50px); !* Slide in from below *!*/
/*    }*/

/*    @media (max-width: 480px) {*/
/*        .hero-image1 > img { !* Selector corregido: Solo afecta a la imagen hija directa *!*/
/*            width: 120%;*/
/*            max-width: 450px;*/
/*            animation: fadeInSlideY 0.8s ease-in-out forwards;*/
/*            transform: translateY(50px); !* Slide in from below *!*/
/*        }*/
/*    }*/

/*    !* Keyframes for Mobile & Tablet Animation (Slide from Below) *!*/
/*    @keyframes fadeInSlideY {*/
/*        0% {*/
/*            opacity: 0;*/
/*            transform: translateY(50px);*/
/*        }*/
/*        100% {*/
/*            opacity: 1;*/
/*            transform: translateY(0);*/
/*        }*/
/*    }*/

/*}*/


/* Global StylesHowTo */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}


/* Section Styling */
.how-to-sell {
    display: flex;
    /*align-items: center;*/
    justify-content: space-evenly;
    /*max-width: 1200px;*/
    /*margin: 40px auto;*/
    padding: 4rem 4rem;
    background-color: var(--color-blanco);

    @media (max-width: 768px) {
        grid-template-areas: "hd" "sd" "main" "ft";

    }

    @media (max-width: 768px) {
        padding: 4rem 0rem;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .custom-about-section {
        padding: 50px 5%;
    }

    .custom-row {
        flex-direction: column;
        text-align: center;
    }

    .custom-reverse {
        flex-direction: column;
    }

    .custom-text {
        text-align: center;
    }

    .custom-image img {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .custom-title {
        font-size: 1.8rem;
    }

    .custom-text p {
        font-size: 1rem;
    }

    .custom-image img {
        width: 180px;
    }
}

@media (max-width: 480px) {
    .custom-title {
        font-size: 1.6rem;
    }

    .custom-text p {
        font-size: 0.9rem;
    }

    .custom-image img {
        width: 150px;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .custom-about-section {
        padding: 50px 5%;
    }

    .custom-row {
        flex-direction: column;
        text-align: center;
    }

    .custom-reverse {
        flex-direction: column;
    }

    .custom-text {
        text-align: center;
    }

    .custom-image img {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .custom-title {
        font-size: 1.8rem;
    }

    .custom-text p {
        font-size: 1rem;
    }

    .custom-image img {
        width: 180px;
    }
}

/* Responsive Design */


@media (max-width: 480px) {
    .custom-title {
        font-size: 1.6rem;
    }

    .custom-text p {
        font-size: 0.9rem;
    }

    .custom-image img {
        width: 150px;
    }
}

/* Text Content */
/*.content {*/
/*    max-width: 50%;*/
/*}*/

h2 {
    font-size: 32px;
    color: #f26700;
}


h2 span {
    font-weight: bold;
}

.steps p {
    font-size: 18px;
    color: #08265c;
    margin: 10px 0;
}

.steps p strong {
    color: #08265c;
}


/* Image */
.image {
    max-width: 45%;
    position: relative;
    transform: translateY(50px); /* Slide from bottom */
    animation: fadeInSlideY 0.8s ease-in-out forwards;
}


.image img {
    width: 100%;
}

/* Responsive Design */

/* Tablet (768px) */
@media screen and (max-width: 1024px) {
    .how-to-sell {
        flex-direction: column;
        text-align: center;
    }

    .content {
        /*max-width: 80%;*/
        margin-bottom: 20px;
    }

    .image {
        max-width: 80%;
    }
}


/*.btn1 {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    padding: 12px 20px;*/
/*    font-size: 16px;*/
/*    font-weight: bold;*/
/*    text-align: center;*/
/*    text-decoration: none;*/
/*    border-radius: 30px;*/
/*    width: 100%;*/
/*    max-width: 300px;*/
/*    min-width: 250px;*/
/*    transition: 0.3s;*/
/*    gap: 15px;*/
/*    opacity: 0; !* Start hidden *!*/
/*    transform: translateY(30px); !* Start lower *!*/
/*    animation: fadeInButtons 1s ease-in-out forwards;*/
/*    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);*/
/*}*/

/*.btn1 img {*/
/*    width: 20px;*/
/*    height: auto;*/
/*    gap: 10px;*/

/*}*/

/*!* Staggered Animation: Each button appears with a slight delay *!*/
/*.btn:nth-child(1) {*/
/*    animation-delay: 0.2s;*/
/*}*/

/*.btn:nth-child(2) {*/
/*    animation-delay: 0.4s;*/
/*}*/

/*.btn:nth-child(3) {*/
/*    animation-delay: 0.6s;*/
/*}*/

/* Keyframes for Fade-in + Slide-up Effect */
@keyframes fadeInButtons {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Effect: Bounce Effect */


/* Keyframes for Bounce Effect */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Click Effect: Slight Shrink */
.btn1:active {
    transform: scale(0.95);
}

.btn1-orange {
    background: #f26700;
    color: white;

}

.btn1-orange::after,
.btn1-orange::before {
    content: '';
    position: absolute;
    background: linear-gradient(to right, #ff6200, #b63d00);
    color: white;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-out;
}

.btn1-orange::before {
    top: -5px;
    transform-origin: left;
}

.btn1-orange:hover::after,
.btn1-orange:hover::before {
    transform: scaleX(1);
}


.btn1-orange:hover {
    background: linear-gradient(90deg, #f16200, #b63d00 70.71%)
}

.btn1-blue {
    background: #08265c;
    color: white;
    margin-top: 10px;
}

.btn1-blue::after,
.btn1-blue::before {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, #1a3669, #9ecfff 70.71%);
    color: white;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-out;
}

.btn1-blue::before {
    top: -5px;
    transform-origin: left;
}

.btn1-blue:hover::after,
.btn1-blue:hover::before {
    transform: scaleX(1);
}

.btn1-blue:hover {
    background: linear-gradient(90deg, #2770f9, #9ecfff 70.71%);
}


/*.buttons1 .btn-blue {*/
/*    flex: flex 1 1 auto;*/
/*    align-items: left;*/
/*}*/


/*.buttons1 {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    align-items: center; !* Centers the buttons horizontally *!*/
/*    width: 100%; !* Ensures full width for centering *!*/
/*    gap: 16px;*/

/*}*/

/*.btn1 {*/
/*    width: 80%; !* Makes buttons take 80% of container width *!*/
/*    max-width: 300px; !* Prevents buttons from being too wide *!*/
/*    text-align: center; !* Ensures text is centered *!*/
/*}*/

/* Mobile (480px) */
@media screen and (max-width: 768px) {
    .how-to-sell {
        flex-direction: column;
        text-align: center;
    }

    .content {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        /*width: 50%;*/
        /*max-width: 100%;*/
        font-stretch: expanded;
    }

    .steps p {
        font-size: 16px;
        width: 100%;
        max-width: 100%;
        font-stretch: extra-condensed;

    }

    .image {
        max-width: 100%;
    }

    .btn1 {

        width: 100%; /* Full width on mobile */

    }

}

.app {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    position: relative;
    margin-top: 20px;
}

.screen {
    opacity: 0;
    transition: opacity 1s ease;
    position: absolute;
    inset: 0;
    background: #fff;
    padding: 20px;
}

.screen.active {
    opacity: 1;
    position: relative;
}

#logoTelcel {
    display: block;
    margin: 0 auto 20px;
    width: 180px;
}

.montos {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 15px;
}

.monto {
    background: #fff;
    border: 2px solid #E7EAF0;
    border-radius: 15px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.25);
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    color: #F16200;
    cursor: pointer;
    transition: transform .2s;
}

.monto:hover {
    transform: scale(1.05);
}

.monto.sel {
    border-color: #f16200;
}

.input {
    border-radius: 36px;
    border: 2px solid #E7EAF0;
    background: #F0F1F3;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.25);
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    margin-bottom: 15px;
}

.input svg {
    flex-shrink: 0;
}

.input span {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
}

.icon-right {
    background: #F16200;
    border-radius: 50%;
    padding: 8px;
}

.comision span {
    color: #00bd76;
    font-weight: 700;
}

.saldo {
    border-radius: 36px;
    border: 2px solid #70809D;
    color: #fff;
    background: #2A3D5C;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
}

.btn-recarga {
    border-radius: 36px;
    border: 2px solid #ffb732;
    background: #f16200;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.25);
    color: #fff;
    height: 60px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.ticket {
    text-align: center;
    color: #1A3669;
}

.ticket h2 {
    color: #F16200;
}

.ticket .dato {
    margin: 10px 0;
}

.botones-animacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.dato span {
    color: #F16200;
    font-weight: 700;
}


.btn-animacion {
    width: 120px;
    height: 80px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(242, 243, 245, 0.5) 50%, #1A3669 50%);
    box-shadow: 0 4px 10px #BCCBE5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-size: 11px;
    transition: transform .2s;
}

.btn-animacion svg {
    margin-bottom: 6px;
}

.btn-animacion:hover {
    transform: scale(1.05);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.bounce-animation {
    animation: bounce 0.8s ease;
}

/* Register Section Background */
.backend-message-container {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    background-color: #ffe0e0;
    color: #b30000;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
}

.backend-message-container.hidden {
    display: none;
}

.registro-container {
    display: none;
}

.registro-container.active {
    display: block;
}


#toast {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    border-left: 6px solid #dc3545;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    width: 90%;
    max-width: 600px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#toast.hidden {
    display: none;
}

#toast h3 {
    margin-top: 0;
    font-size: 22px;
    font-weight: bold;
    color: #212529;
}

.toast-error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
}

#toast-close {
    align-self: flex-end;
    background-color: #dc3545;
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
    transition: background 0.3s;
}

#toast-close:hover {
    background-color: #c82333;
}


.modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 22px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
}

.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.modal-close-btn:hover {
    background-color: #b02a37;
}

/* Fondo del modal */
#modalError {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.55); /* oscurece fondo */
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
}

/* Mostrar modal */
#modalError.show {
    display: flex;
    animation: fadeIn 0.3s ease-in-out;
}

/* Contenedor del contenido */
#modalErrorContent {
    background-color: #f8d7da;
    padding: 24px 28px;
    border-radius: 12px;
    width: 100%;
    max-width: 750px;
    max-height: 85vh; /* Limita la altura para evitar desbordamiento */
    overflow-y: auto; /* Scroll interno si hay muchos errores */
    color: #721c24;
    border-left: 6px solid #dc3545;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    position: relative;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    line-height: 1.5;
}

/* Botón de cerrar */
#modalErrorClose {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: #ffffff;
    -webkit-text-stroke: 1px #f16200;
    font-size: 22px;
    font-weight: bolder;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

#modalErrorClose:hover {
    color: #dc3545;
}

/* Animación */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive ajustes */
@media (max-width: 480px) {
    #modalErrorContent {
        font-size: 15px;
        padding: 20px;
        width: 95%;
    }

    #modalErrorClose {
        top: 8px;
        right: 12px;
        font-size: 20px;
    }
}


@keyframes fadeInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/*.register-section {*/
/*    background-image: url(https://storage.googleapis.com/linn-files/LinntaeWebPage/Formulario/ineedyou.png);*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    padding: 60px 20px;*/
/*    background: none;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: flex-end;*/
/*    flex-direction: column;*/
/*    width: 100%;*/
/*    padding: 0;*/
/*}*/


/* Background Container */
/*.register-background {*/
/*    background: #ffffff;*/
/*    background: linear-gradient(31deg,rgba(255, 255, 255, 1) 0%, rgba(255, 250, 250, 1) 43%, rgba(255, 255, 255, 1) 93%);*/
/*    border-radius: 16px;*/
/*    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);*/
/*    backdrop-filter: blur(15px);*/
/*    -webkit-backdrop-filter: blur(6.1px);*/
/*    border: 1px solid rgba(255, 255, 255, 16);*/
/*    padding: 20px;*/
/*    max-width: 900px;*/
/*    width: 115%;*/
/*    margin-left: auto;*/
/*    transition: opacity 0.6s ease-out, transform 0.6s ease-out;*/


/*}*/

/* Hide password validation initially */
#password-validation {
    display: none;
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

.password-container {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-items: center;
}

.password-container input {
    padding-right: 40px;
    width: 100%;
}

.password-container button {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 10px;
}

/* Password validation text */
.password-requirements li {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 15px;
    font-size: 12px;
    color: #475569;
}

#toggle-password {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 8px;
    display: flex;
    align-items: center;
}

#toggle-password img {
    width: 20px;
    height: 20px;
    color: #f16200;
}


/*.register-background {*/
/*    opacity: 1;*/
/*    transform: translateY(0);*/
/*}*/

/* Form Container */
.register-form-container {
    text-align: center;
    width: 100%;
    height: 600px !important;

    .password-requirements {
        background-color: var(--color-verde-linntae-30);
        border-radius: 1rem;
        padding: 1rem !important;

        li {
            font-weight: 700;
        }
    }
}

/* Title */
.register-title {
    font-size: 26px;
    font-weight: bold;
    color: #08265c;
    margin-bottom: 20px;
}

/* Form */
.register-form {
    display: flex;
    flex-direction: column;
    gap: 15px;

}

.form-field-wrapper {
    text-align: left;
}


/* Row Layout */
.register-row {
    display: flex;
    gap: 15px;
}

.register-column {
    flex: 1;
    min-width: 0;
}

/*!* Register Button *!*/
/*.register-button {*/
/*    background: var(--color-naranja-linntae);*/
/*    color: white;*/
/*    padding: 12px;*/
/*    font-size: 16px;*/
/*    font-weight: bold;*/
/*    border: none;*/
/*    border-radius: 26px;*/
/*    cursor: pointer;*/
/*    transition: 0.3s;*/
/*    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);*/
/*    margin-top: 1rem;*/

/*    &:hover {*/
/*        background: linear-gradient(180deg, #2770f9, #004991 70.71%);*/
/*        opacity: 0.75;*/
/*        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);*/
/*        border-width: 15px;*/
/*        border-color: #ffffff;*/
/*    }*/
/*}*/


.google-register {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 10px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 25px;
    background-color: white;
    color: var(--color-azul-linntae);
    max-width: 100%;
    margin: 0 auto;
    transition: background-color 0.3s, color 0.3s;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);

    &:hover {
        /*background: linear-gradient(180deg, #f16200, #f8b88d 70.71%);*/
        /*color: white;*/
        opacity: 0.75;
        box-shadow: 04px 4px 10px rgba(0, 0, 0, 0.3);
        /*border: 1px solid rgb(255, 255, 255);*/
    }

    & img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        display: block;
    }
}


@media (max-width: 768px) {
    .google-register {
        flex-direction: row; /* Asegura que los elementos estén en fila */


    }

    .google-register img {
        max-width: 20px; /* Tamaño reducido para móviles */
    }

    .google-text {
        font-size: 13px;
    }
}

.dark-mode .register-button:hover {
    background-color: #f16200;
}

/* Responsive Design */

/* Tablet (≤1024px) */
@media screen and (max-width: 1024px) {
    .register-background {
        max-width: 900px;
        padding: 30px;
    }

    .register-title {
        font-size: 22px;
    }

    .register-form input,
    .register-form select {
        font-size: 14px;
    }
}

/* Mobile (≤768px) */
@media screen and (max-width: 768px) {


    .register-form label {
        font-size: 1px;

    }

    .register-background
    .register-title {
        font-size: 15px;
    }

    .register-row {
        flex-direction: column;
    }

    .register-button {
        width: 100%;
    }

}

@media (max-width: 480px) {
    .register-background {
        max-width: 100%; /* Ocupa todo el ancho disponible */
        padding: 10px; /* Reduce el padding para pantallas más pequeñas */
        margin-left: 10px;
        margin-right: 10px;
    }
}


.input-group label,
.input-group input,
.input-group select,
.filter-select-wrap,
.filter-select-display {
    height: var(--field-h) !important;
    line-height: var(--field-h);
}

.input-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px; /* espacio para el icono */
}

/* Label “pastilla”: centrado vertical, sin crecer de más */
.input-group label {
    display: flex;
    align-items: center;
    padding: 0 14px; /* antes tenías 12/18; con altura fija se ve mejor */
    font-size: var(--label-font);
}

/* Input/select dentro del group: sin borde extra (ya lo pone el group) */
.input-group input,
.input-group select {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 14px;
    font-size: var(--input-font);


}

.input-group select,
.filter-select-display {
    cursor: pointer;
}

/* Nuestro “display” del select con buscador: que parezca el input nativo */
.filter-select-wrap {
    z-index: 1;
}

.filter-select-display {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--field-h);
    padding: 0 14px;
    font-size: var(--input-font);
    border: 0; /* sin marco: lo da el .input-group */
    box-shadow: none;
    background: transparent; /* queda integrado con el input */
}

/* Chevron para el display del buscador (el que ves) */
.filter-select-display {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 14px;
    font-size: var(--input-font);
    border: 0;
    box-shadow: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    padding-right: 40px; /* espacio para chevron */
    white-space: nowrap; /* 1. Evita que el texto baje de línea */
    overflow: hidden; /* 2. Oculta el texto que se sale de la caja */
    text-overflow: ellipsis; /* 3. Pone los "..." al final */
}

.filter-select-display::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .18s ease;
    /* Usamos el mismo chevron como background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px;
}

/* Rotación cuando está abierto (tu JS ya añade .is-open al .input-group) */
.input-group.is-open .filter-select-display::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Opcional: efecto hover */
.filter-select-display:hover {
    filter: brightness(0.98);
}

/* Panel del dropdown: igual que ya definiste */
.filter-select-panel {
    position: fixed;
    z-index: 100000;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
    overflow: hidden;
}

.filter-select-hidden {
    display: none;
}

.filter-search {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    outline: 0;
    font-size: 14px;
}

.filter-list {
    max-height: 260px;
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-item {
    padding: 10px 12px;
    cursor: pointer;
}

.filter-item:hover, .filter-item[aria-selected="true"] {
    background: #f7f7fb;
}

/* El badge por encima del wrapper (ya lo tenías) */
.input-group > *:first-child {
    position: relative;
    z-index: 2;
}

/* ===== ICONO DROPDOWN EN SELECTS NORMALES ===== */
.input-group select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px; /* espacio para la flechita */
    transition: filter 0.15s ease;
}

.input-group select:hover {
    filter: brightness(0.95);
}

/* (opcional) cursor pointer también en el label */
.input-group label {
    cursor: default;
}

/* --- DISEÑO RESPONSIVO --- */
@media screen and (max-width: 768px) {

    .input-group label {

        font-size: 11px;
    }

    .input-group input, .input-group select {

        font-size: 12px;
    }
}


/* Services Section */
.services1-background {
    background-image: url(https://storage.googleapis.com/linn-files/LinntaeWebPage/cardsection/servicesbackground.png) !important;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.services-title {
    font-size: 28px;
    color: #f26700;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Description */
.services-description {
    font-size: 16px;
    color: #1a3669;
    max-width: 800px;
    margin: 0 auto 20px auto;
    line-height: 1.6;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 30px auto;
}

/* Service Card */
.service-card {
    background: rgba(255, 255, 255, 0.55);
    padding: 20px;
    border-radius: 26px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(6.1px);
    border: 2px solid rgb(255, 255, 255);
    text-align: center;
    transition: 0.3s;
}


.service-card:hover {
    transform: translateY(-5px);
}

/* Service Icon */
.service-icon {
    width: 50px;
    margin-bottom: 10px;
}

/* Service Title */
.service-title {
    font-size: 18px;
    font-weight: bold;
    color: #08265c;
    margin-bottom: 10px;
}


/* Service Text */
.service-text {
    font-size: 14px;
    color: hsl(0, 0%, 0%);
}

/* Responsive Design */

/* Tablet (768px) */
@media screen and (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (480px) */
@media screen and (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        max-width: 90%;
        margin: 0 auto;
    }

    .services-title {
        font-size: 24px;
    }

    .services-description {
        font-size: 14px;
    }
}

#pagos-servicios.svc-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 28px;
    justify-content: space-evenly;
    padding: 4rem 1rem;
    background-color: var(--color-blanco) !important;
    @media (max-width: 900px) {
        flex-direction: column;
    }

}

/*!* Responsivo *!*/
/*@media (max-width: 900px) {*/
/*    #pagos-servicios.svc-section {*/
/*        grid-template-columns:1fr;*/
/*    }*/
/*}*/

/* Texto */
#pagos-servicios .hero-text {
    max-width: 680px;
}

#pagos-servicios .svc-title {
    font-size: 28px;
    font-weight: 700;
    color: #f26700;
    margin: 0 0 6px;
}

#pagos-servicios .svc-subtitle {
    font-size: 16px;
    font-weight: 700;
    color: #08265c;
    margin: 6px 0;
}

#pagos-servicios .svc-desc {
    font-size: 14px;
    color: #333;
    margin: 6px 0 14px;
}

#pagos-servicios .svc-cta {
    display: inline-block;
    background: #f26700;
    color: #fff;
    padding: 12px 20px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: .2s;
}

#pagos-servicios .svc-cta:hover {
    background: #d85600;
}

#pagos-servicios .steps-title {
    font-size: 20px;
    font-weight: 800;
    color: #08265c;
    margin: 22px 0 12px;
}

/* PILLS */
#pagos-servicios .steps-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(260px, 1fr));
    gap: 16px;

    @media (max-width: 900px) {
        grid-template-columns:1fr;
    }
}

/*@media (max-width: 900px) {*/
/*    #pagos-servicios .steps-grid {*/
/*        grid-template-columns:1fr;*/
/*    }*/
/*}*/

#pagos-servicios .step-card {
    text-align: center;
    padding: 15px 24px;
    color: #08265c;
    background: rgba(26, 54, 105, 0);
    border-radius: 96px;
    border: 2px solid #F16200;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25), 4px 4px 10px rgba(0, 0, 0, .2);
    width: 100%;
}

#pagos-servicios .step-card strong {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}

#pagos-servicios .step-card p {
    font-size: 14px;
    margin: 0;
    line-height: 1.35;
}

/* Simulador */
#pagos-servicios .svc-sim-wrap {
    position: sticky;
    top: 90px;
}

#pagos-servicios .svc-sim {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    position: relative;
}

/* Neutraliza estilos viejos */
.service-payments-image,
.service-payments-top {
    display: none !important;
}

.service-payments-steps-grid {
    all: unset;
}

/* ====== SIMULACIÓN PAGOS (namespaced: svc-) ====== */
.svc-sim {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    position: relative;
}

.svc-screen {
    opacity: 0;
    transition: opacity .6s ease;
    position: absolute;
    inset: 0;
    background: #fff;
    padding: 20px;
}

.svc-screen.is-active {
    opacity: 1;
    position: relative;
}

.svc-brand-top {
    display: block;
    margin: 0 auto 12px;
    width: 160px;
    max-width: 60%;
}

.svc-logos {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 14px;
    margin-top: 6px;
}

.svc-card {
    border: 2px solid #E7EAF0;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .25);
    height: 90px;
    display: grid;
    place-items: center;
    padding: 10px;
    transition: transform .2s, border-color .2s;
}

.svc-card img {
    max-height: 52px;
    max-width: 200px;
    object-fit: contain;
}

.svc-card.is-sel {
    border-color: #F16200;
    transform: scale(1.03);
}

.svc-brand-wide {
    width: 100%;
    border: 2px solid #E7EAF0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .25);
    height: 68px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    padding: 6px 10px;
}

.svc-brand-wide img {
    max-height: 40px
}

.svc-field {
    border-radius: 36px;
    border: 2px solid #E7EAF0;
    background: #F0F1F3;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .25);
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #1A3669;
}

.svc-field .svc-label {
    color: #5c6f90;
    font-size: 14px;
    min-width: 140px
}

.svc-field .svc-val {
    flex: 1;
    text-align: right;
    font-weight: 700
}

.svc-field svg {
    flex-shrink: 0
}

.svc-field.svc-green .svc-val {
    color: #00BD76
}

.svc-field.svc-green svg path {
    fill: #00BD76
}

.svc-rightchev {
    margin-left: 8px;
    opacity: .7
}

.svc-row2 {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.svc-pill {
    border-radius: 36px;
    border: 2px solid #E7EAF0;
    background: #F0F1F3;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .25);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    font-weight: 700;
    color: #1A3669;
}

@media (max-width: 480px) {
    .svc-field .svc-label {
        min-width: auto; /* <-- CORRECCIÓN CLAVE 1 */
        font-size: 3px; /* Reducimos un poco el texto para ayudar */
    }

    .svc-row2 {
        grid-template-columns: 1fr; /* <-- CORRECCIÓN CLAVE 2 */
    }

    /*
    * También reducimos el padding y el gap dentro del campo
    * para ganar más espacio horizontal.
    */
    .svc-field {
        padding: 0 10px; /* Menos padding horizontal */
        gap: 4px; /* Menos espacio entre ícono, label y valor */
    }
}

.svc-pill .svc-v {
    color: #00BD76
}

.svc-saldo {
    border-radius: 36px;
    border: 2px solid #70809D;
    background: #2A3D5C;
    color: #fff;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-weight: 800;
    margin-bottom: 12px;
}

.svc-btn {
    border-radius: 36px;
    border: 2px solid #FF8132;
    background: #f16200;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .25);
    color: #fff;
    height: 60px;
    font-size: 18px;
    font-weight: 800;
    display: grid;
    place-items: center;
    cursor: pointer;
    text-align: center;
}

/* Ticket */
.svc-ticket {
    text-align: center;
    color: #1A3669;
}

.svc-ticket h2 {
    color: #F16200;
    margin: 6px 0 10px;
}

.svc-kv {
    margin: 6px 0
}

.svc-k {
    color: #5a73a8;
    font-weight: 600;
}

.svc-v {
    color: #1A3669;
    font-weight: 800;
}

.svc-v.svc-orange {
    color: #F16200
}

.svc-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.svc-mini {
    width: 120px;
    height: 80px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(242, 243, 245, .5) 50%, #1A3669 50%);
    box-shadow: 0 4px 10px #BCCBE5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    text-align: center;
    font-size: 11px;
    transition: transform .18s;
}

.svc-mini:hover {
    transform: scale(1.05)
}

.svc-mini svg {
    margin-bottom: 6px
}

/* Para ubicarlo a la derecha de tu grid existente */
.service-payments-steps-grid {
    display: grid;
    grid-template-columns:1.2fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .service-payments-steps-grid {
        grid-template-columns:1fr
    }
}

/* --- NUEVO CARRUSEL DE LOGOS (MARQUESINA) --- */

/* Contenedor de la sección (le damos un fondo suave) */
.virtual-recharges-container {
    text-align: center;
    padding: 60px 0;
    /* Usamos un fondo pastel naranja muy sutil */
    background: linear-gradient(180deg, var(--color-naranja-linntae-50) 0%, var(--color-naranja-linntae-60) 100%);
    overflow: hidden; /* Asegura que nada se desborde */
}

.virtual-recharges-title {
    font-size: 28px;
    font-weight: bold;
    color: #08265c; /* Título en azul oscuro */
}

.virtual-recharges-subtitle {
    font-size: 16px;
    color: #f16200; /* Subtítulo en naranja */
    margin-top: 10px;
}

/* El "visor" del carrusel */
.virtual-recharges-slider {
    position: relative;
    /*max-width: 1200px; !* Un poco más ancho *!*/
    /*margin: 30px auto;*/
    overflow: hidden; /* <-- ¡IMPORTANTE! Esto es lo que "corta" */
    padding: 2rem 1rem;

    /* Efecto de "fade" en los bordes para que no se vea el corte */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* El "track" que se anima */
.virtual-recharges-track {
    display: flex;
    gap: 30px;
    width: calc((200px + 30px) * 48);
    animation: marquee 60s linear infinite;
}


.virtual-recharges-slider:hover .virtual-recharges-track {
    animation-play-state: paused;
}


.slide {
    flex: 0 0 240px;
    display: grid;
    place-items: center;
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    height: 130px;
    padding: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.slide:hover {
    transform: translateY(-5px); /* Efecto "lift" al pasar el mouse */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* El logo dentro de la card */
.slide img {
    width: auto;
    max-width: 180px; /* Ancho máximo del logo */
    max-height: 80px; /* Alto máximo del logo */
    object-fit: contain; /* Asegura que el logo se vea bien sin deformarse */
    opacity: 0.8;
    transition: opacity 0.3s;
}

.slide:hover img {
    opacity: 1; /* Opacidad total al pasar el mouse */
}

/* La animación de la marquesina */
@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        /* Mueve el track exactamente la mitad de su ancho (un grupo de logos) */
        transform: translateX(-50%);
    }
}

/* Responsive (hacemos los logos un poco más pequeños) */
@media screen and (max-width: 768px) {
    .slide {
        flex: 0 0 200px; /* Más angostos en móvil */
        height: 110px;
        gap: 20px;
    }

    .slide img {
        max-width: 150px;
        max-height: 65px;
    }

    .virtual-recharges-track {
        /* Recalculamos ancho para móvil */
        width: calc((200px + 20px) * 48);
        gap: 20px;
        animation-duration: 50s; /* Un poco más rápido en móvil */
    }
}

/* --- Contenedor Principal de la Sección --- */
.recharge-section-container {
    background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 40%);
    padding: 60px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Modo Oscuro (si lo usas) */
.dark-mode .recharge-section-container {
    background: linear-gradient(180deg, #06102e 2%, #1a3669 30%);
    color: #f0f0f0;
}

/* --- Layout de Grid (2 columnas) --- */
.recharge-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.recharge-info, .recharge-visuals {
    flex: 1;
}

/* --- Columna Izquierda: Texto --- */
.recharge-info {
    text-align: left;
}

.recharge-title {
    font-size: 2.1rem; /* 34px */
    font-weight: 700;
    color: #08265c;
    line-height: 1.3;
}

.recharge-description {
    font-size: 1rem; /* 16px */
    color: #4a4a4a;
    margin-top: 20px;
    line-height: 1.7;
}

.dark-mode .recharge-title {
    color: #ffffff;
}

.dark-mode .recharge-description {
    color: #c5c5c5;
}

/* --- Columna Derecha: Visuales --- */
.recharge-visuals {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

/* Contenedor de iconos */
.recharge-icons-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.icon-box {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border:solid #f16200;
}

.dark-mode .icon-box {
    background-color: #2a4a87;
}

.recharge-icon {
    width: 45px;
    height: 45px;
}


.stats-card {
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 26px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 350px;
}

.dark-mode .stats-card {
    background-color: #1a3669;
}

.stats-card h3 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
    transition: opacity 0.3s ease-out; /* Para la animación de cambio */
}

.dark-mode .stats-card h3 {
    color: #ffffff;
}

.amount-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.amount-value {
    font-size: 2.8rem; /* 45px */
    font-weight: 700;
    color: #ff6f00; /* Naranja vibrante */
    line-height: 1;
    transition: opacity 0.3s ease-out; /* Para la animación de cambio */
}

.arrow-up {
    width: 30px;
    height: 30px;
    fill: #00bf77;
    animation: bounce-up 1.5s infinite ease-in-out;
}

@keyframes bounce-up {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px); /* Mueve la flecha 6px hacia arriba */
    }
}

/* Barras animadas */
.animated-bars {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 50px;
    gap: 5px;
}

.bar {
    width: 8px;
    background-color: #08265c;
    border-radius: 4px;
    animation: bar-wave 1.2s infinite ease-in-out;
}

.dark-mode .bar {
    background-color: #5d8aff;
}

/* Animación de las barras (efecto onda) */
@keyframes bar-wave {
    0%, 100% {
        height: 5%;
    }
    50% {
        height: 100%;
    }
}

/* Asignar un retraso diferente a cada barra para crear la onda */
.bar:nth-child(2) {
    animation-delay: 0.1s;
}

.bar:nth-child(3) {
    animation-delay: 0.2s;
}

.bar:nth-child(4) {
    animation-delay: 0.3s;
}

.bar:nth-child(5) {
    animation-delay: 0.4s;
}

.bar:nth-child(6) {
    animation-delay: 0.5s;
}

.bar:nth-child(7) {
    animation-delay: 0.6s;
}

.bar:nth-child(8) {
    animation-delay: 0.7s;
}

.bar:nth-child(9) {
    animation-delay: 0.8s;
}

.bar:nth-child(10) {
    animation-delay: 0.9s;
}

/* --- Diseño Responsivo --- */
@media screen and (max-width: 768px) {
    .recharge-grid {
        flex-direction: column; /* Apila las columnas en móvil */
        gap: 40px;
    }

    .recharge-info {
        text-align: center; /* Centra el texto en móvil */
    }

    .recharge-title {
        font-size: 1.8rem; /* 28px */
    }

    .recharge-description {
        font-size: 0.95rem; /* 15px */
    }

    .recharge-visuals {
        width: 100%;
    }

    .stats-card {
        padding: 20px;
    }

    .amount-value {
        font-size: 2.5rem; /* 40px */
    }
}


/* Recharge Platform Section */
.recharge-platform-container {
    background: linear-gradient(180deg, var(--color-azul-linntae-20));
    padding: 50px 20px;
    text-align: center;
}


/* Title */
.recharge-platform-title {
    font-size: 28px;
    font-weight: bold;
    color: #f16200;
    margin-bottom: 10px;
}

/* Subtitle */
.recharge-platform-subtitle {
    font-size: 18px;
    font-weight: bold;
    color: #08265c;
}

/*Darkkmode*/
.dark-mode .recharge-platform-subtitle {
    color: #ffffff;
}

.dark-mode .recharge-platform-description {
    color: #ffffff;
}

/* Description */
.recharge-platform-description {
    font-size: 16px;
    color: #333;
    max-width: 800px;
    margin: 10px auto 30px auto;
    line-height: 1.5;
}

/* Recharge Grid */
.recharge-platform-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Recharge Card */
.recharge-card {
    background: white;
    padding: 20px;
    border-radius: 26px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: 0.3s;
    border: 2px solid transparent;
}

.recharge-card:hover {
    border-color: #f26700;
    transform: translateY(-20px);
}

/* Recharge Icon */
.recharge-icon {
    width: 50px;
    margin-bottom: 10px;
}


/* Recharge Card Title */
.recharge-card-title {
    font-size: 18px;
    font-weight: bold;
    color: #08265c;
    margin-bottom: 10px;
}

/* Recharge Card Text */
.recharge-card-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

/* Recharge Card Button */
.recharge-card-button {
    display: inline-block;
    background: #08265c;
    color: white;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

.recharge-card-button:hover {
    background: #f16200;
}

.dark-mode .recharge-card-button {
    background-color: #f16200;
}

.dark-mode .recharge-card-button:hover {
    background-color: forestgreen;
}

/* Responsive Design */

/* Tablet (≤1024px) */
@media screen and (max-width: 1024px) {
    .recharge-platform-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (≤768px) */
@media screen and (max-width: 768px) {
    .recharge-platform-grid {
        grid-template-columns: 1fr;
    }

    .recharge-platform-title {
        font-size: 24px;
    }

    .recharge-platform-subtitle,
    .recharge-platform-description {
        font-size: 14px;
    }

    .recharge-card {
        max-width: 90%;
        margin: 0 auto;
    }

    .recharge-card-button {
        width: 80%;
    }
}

/* --- Sección Venta de Recargas (Rediseño) --- */
.recharge-sales-container {
    background: linear-gradient(180deg, #f0f4f8 0%, #ffffff 50%);
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
}

.dark-mode .recharge-sales-container {
    background: linear-gradient(180deg, #081232 0%, #1a3669 50%);
}

/* --- Layout Principal de 2 Columnas --- */
.recharge-sales-grid {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Columna Izquierda (Visual) --- */
.recharge-sales-visual {
    flex: 1;
    text-align: center;
}

.recharge-sales-image {
    max-width: 100%;
    width: 450px;
    height: auto;
    margin-bottom: 30px;
    transition: transform 0.4s ease-in-out;
    transform: rotate(-3deg);
}

.recharge-sales-image:hover {
    transform: scale(1.05) rotate(0deg);
}

.recharge-sales-button {
    display: inline-block;
    background: #ff6f00; /* Naranja vibrante */
    color: white;
    padding: 15px 35px;
    font-size: 1.1rem; /* 18px */
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 50px; /* Bordes redondeados */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 111, 0, 0.4);
}

.recharge-sales-button:hover {
    background: #e66000;
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(255, 111, 0, 0.5);
}

/* --- Columna Derecha (Información) --- */
.recharge-sales-info {
    flex: 1.2; /* Damos un poco más de espacio al texto */
    text-align: left;
}

.recharge-sales-title {
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
    color: #08265c;
    margin-bottom: 15px;
    line-height: 1.2;
}

.recharge-sales-subtitle {
    font-size: 1.1rem; /* 18px */
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
}

.recharge-sales-description {
    font-size: 1rem; /* 16px */
    color: #555;
    line-height: 1.7;
    margin-bottom: 30px;
}

.dark-mode .recharge-sales-title {
    color: #ffffff;
}

.dark-mode .recharge-sales-subtitle {
    color: #c5c5c5;
}

.dark-mode .recharge-sales-description {
    color: #b0b0b0;
}

/* --- Tarjetas de Características --- */
.features-grid {
    display: grid;
    gap: 20px;
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: #ffffff;
    padding: 25px;
    border-radius: 26px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: solid #f16200;
}

.dark-mode .feature-card {
    background-color: #1a3669;
}

.feature-icon {
    flex-shrink: 0;
    color: #08265c;
}

.dark-mode .feature-icon {
    color: #5d8aff;
}

.feature-icon svg {
    width: 28px;
    height: 28px;
}

.feature-text h4 {
    font-size: 1.1rem; /* 18px */
    font-weight: 600;
    color: #08265c;
    margin: 0 0 5px 0;
}

.feature-text p {
    font-size: 0.95rem; /* 15px */
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.dark-mode .feature-text h4 {
    color: #ffffff;
}

.dark-mode .feature-text p {
    color: #c5c5c5;
}

/* --- Diseño Responsivo --- */
@media screen and (max-width: 992px) {
    .recharge-sales-grid {
        /* Se apila la imagen debajo del texto en móvil */
        flex-direction: column-reverse;
        gap: 40px;
    }

    .recharge-sales-info, .recharge-sales-visual {
        text-align: center;
        flex: 1;
    }

    .recharge-sales-title {
        font-size: 2rem; /* 32px */
    }

    .feature-card {
        text-align: left; /* Mantenemos el texto de la tarjeta alineado a la izquierda */
    }
}

/* Simple Banner Styling */
.simple-banner-container {
    display: flex;
    flex-direction: column; /* Cambiado a columna para que el contenido se apile */
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    background-color: var(--color-azul-linntae-10);
    position: relative;
    overflow: hidden; /* Para manejar transiciones */
    min-height: 300px; /* Ajusta según sea necesario */
}

.banner-content {
    text-align: center;
    margin-bottom: 30px; /* Espacio entre el texto y el icono/opciones */
}

.banner-title {
    font-size: 40px;
    color: #08265c;
    margin-bottom: 10px;
    font-weight: bold;
}

.banner-title .highlight-text {
    color: #f16200; /* Naranja que deseas */
    transition: all 0.5s ease-in-out;
    display: inline-block; /* Para que la transición de color y texto se vea mejor */
}

.banner-description {
    font-size: 18px;
    color: #08265c; /* Color del texto de descripción */
    max-width: 600px;
    margin: 0 auto;
    transition: opacity 0.5s ease-in-out;
}

.banner-icon-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 30px;
}

.banner-icon {
    width: 100%;
    height: 100%;
    background: #08265c; /* Fondo del icono principal */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease-in-out;
}

.banner-icon img {
    width: 70px;
    filter: invert(1); /* Para iconos blancos sobre fondo oscuro */
}

.banner-options {
    display: flex;
    flex-direction: column; /* Cambiado a columna para la lista de opciones */
    gap: 15px; /* Espacio entre las opciones */
    text-align: center;
}

.banner-options .option {
    font-size: 22px;
    color: rgba(8, 38, 92, 0.4); /* Color más opaco para las opciones inactivas */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-weight: bold;
}

.banner-options .option.active {
    color: #08265c; /* Color más oscuro para la opción activa */
    font-size: 26px; /* Ligeramente más grande para destacar */
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

/* Responsive Design */
@media screen and (min-width: 768px) {
    .simple-banner-container {
        flex-direction: row; /* En pantallas grandes, vuelve a fila */
        justify-content: space-around;
        align-items: center;
        text-align: left;
    }

    .banner-content {
        text-align: left;
        margin-bottom: 0;
    }

    .banner-icon-wrapper {
        margin-bottom: 0;
    }

    .banner-options {
        text-align: right;
    }
}

@media screen and (max-width: 768px) {
    .banner-title {
        font-size: 30px;
    }
    .banner-description {
        font-size: 16px;
    }
    .banner-icon-wrapper {
        width: 120px;
        height: 120px;
    }
    .banner-icon img {
        width: 60px;
    }
    .banner-options .option {
        font-size: 18px;
    }
    .banner-options .option.active {
        font-size: 22px;
    }
}

/* General Styling */
.app-sale-section-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    background: white;
    animation: fadeIn 1s ease-in-out;
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content Wrapper */
.app-sale-section-content {
    display: flex;
    align-items: center;
    max-width: 1100px;
    width: 100%;
    gap: 40px;

}


/* Left Side - Text Box */
.app-sale-text-box {
    background: linear-gradient(135deg, #f26700, #ff9c00);
    padding: 30px;
    border-radius: 15px;
    color: white;
    width: 50%;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

/* Bouncy Hover Effect */
.app-sale-text-box:hover {
    transform: scale(1.05);
}

.app-sale-section-container {
    background: linear-gradient(to bottom, var(--color-blanco), var(--color-naranja-linntae-60));
}


/* Title */
.app-sale-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ffffff;
}

/* Subtitle */
.app-sale-subtitle {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* List */
.app-sale-list {
    list-style-type: none;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

.app-sale-list li {
    margin-bottom: 8px;
}

/* Button */
.app-sale-button {
    display: inline-block;
    background: #08265c;
    color: white;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    margin-top: 15px;
}


/* Bouncy Hover Effect on Button */
.app-sale-button:hover {
    background: #041c44;
    transform: scale(1.1);
}

/* Right Side - Image Box */
.app-sale-image-box {
    width: 50%;
    text-align: center;
}

/* Image with Hover Effect */
.app-sale-image {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.app-sale-image:hover {
    transform: scale(1.1);
}

/* Responsive Design */

/* Tablet (≤1024px) */
@media screen and (max-width: 1024px) {
    .app-sale-section-content {
        flex-direction: column;
        text-align: center;
    }

    .app-sale-text-box {
        width: 90%;
        padding: 25px;
    }

    .app-sale-image-box {
        width: 90%;
    }
}

/* Mobile (≤768px) */
@media screen and (max-width: 768px) {
    .app-sale-title {
        font-size: 20px;
    }

    .app-sale-subtitle {
        font-size: 14px;
    }

    .app-sale-list {
        font-size: 12px;
    }

    .app-sale-button {
        width: 100%;
        text-align: center;
    }
}

/* How to cards data*/

/* General Styling */
.sell-recharges-section-container {
    text-align: center;
    padding: 30px;
    padding-bottom: 50px;
    background: linear-gradient(180deg, #ffffff, #ffffff);
}

/* Content Layout */
.sell-recharges-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 100px;
}


/* Text Box */
.sell-recharges-text-box {
    width: 50%;
    text-align: left;
    color: #ffffff;
}

.sell-recharges-subtitle {
    color: #ffffff;
}

.sell-recharges-title {
    font-size: 26px;
    font-weight: bold;
    color: #ff6200;
}

.sell-recharges-description {
    font-size: 18px;
    font-weight: bold;
    color: #1a3669;

}


/* Steps Box */
.sell-recharges-steps-box {
    width: 45%;
    padding: 20px;
    background: linear-gradient(135deg, #f26700, #ff9c00);
    color: white;
    border-radius: 10px;
    text-align: left;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}


/* Buttons Section */
.sell-recharges-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.sell-recharges-card {
    background: white;
    padding: 20px;
    border-radius: 26px;
    text-align: center;
    width: 250px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

/* Bouncy Hover Effect */
.sell-recharges-card:hover {
    transform: scale(1.05);
    border: solid #f16200;
}

.sell-recharges-card img {
    width: 50px;
    margin-bottom: 10px;
}

.sell-recharges-card h4 {
    font-size: 16px;
    font-weight: bold;
    color: #08265c;
}

/* Buttons */
.sell-recharges-button {
    display: inline-block;
    background: #08265c;
    color: white;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    margin-top: 10px;
}


.sell-recharges-button:hover {
    background: #f16200;
    transform: scale(1.1);
}

/* Responsive Design */

/* Tablet (≤1024px) */
@media screen and (max-width: 1024px) {
    .sell-recharges-content {
        flex-direction: column;
        text-align: center;
    }

    .sell-recharges-text-box,
    .sell-recharges-steps-box {
        width: 90%;
    }

    .sell-recharges-steps-box {
        text-align: center;
    }
}

/* Mobile (≤768px) */
@media screen and (max-width: 768px) {
    .sell-recharges-title {
        font-size: 20px;
    }

    .sell-recharges-description {
        font-size: 16px;
        text-align: center;
    }

    .sell-recharges-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .sell-recharges-card {
        width: 100%;
    }
}
/* --- Sección Promocional App (Final) --- */

.app-promo-section {
    padding: 60px 5%;
    background-color: #f8f9fc;
}

.app-promo-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Títulos principales */
.app-promo-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-naranja-linntae-90);
    text-align: center;
    margin-bottom: 10px;
}

.app-promo-subtitle {
    font-size: 1.1rem;
    color: #666;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px auto;
}

/* Layout de 2 columnas */
.app-promo-row {
    display: flex;
    align-items: flex-start; /* Alinea arriba */
    justify-content: space-between;
    gap: 40px;
}

/* --- Columna Izquierda (Features) --- */
.app-promo-left {
    flex: 1;
    max-width: 500px;
}

.app-feature-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.app-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.3s ease;
}

.app-feature-icon {
    min-width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
}

/* ¡NUEVO! Gradientes y SVG blanco para los íconos de la izquierda */
.app-feature-icon.icon-bg-gradient-blue {
    background: linear-gradient(45deg, #1a3669, #3b5083); /* Gradiente azul */
}
.app-feature-icon.icon-bg-gradient-orange {
    background: linear-gradient(45deg, #f16200, #ff8c3b); /* Gradiente naranja */
}
.app-feature-icon svg {
    stroke: #fff; /* Ícono blanco */
    width: 28px;
    height: 28px;
}

/* Efecto hover en el ícono cuando se pasa sobre el item */
.app-feature-item:hover .app-feature-icon {
    transform: scale(1.15) rotate(-8deg);
}

.app-feature-text h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: #333;
}

.app-feature-text p {
    margin: 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

/* --- Columna Derecha (Tarjeta "Cómo") --- */
.app-promo-right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.app-howto-card {
    background-color: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
    border: 1px solid #EAF0F0;
    max-width: 500px;
    width: 100%;
}

.app-card-top-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

/* ¡NUEVO! Gradiente y SVG blanco para el ícono superior de la tarjeta */
.app-card-top-icon.icon-bg-gradient-blue {
    background: linear-gradient(45deg, #1a3669, #3b5083); /* Gradiente azul */
}
.app-card-top-icon svg {
    stroke: #fff; /* Ícono blanco */
}

.app-howto-card h2 {
    text-align: center;
    font-size: 1.6rem;
    color: #222;
    margin: 0 0 10px 0;
}

.app-howto-card > p {
    text-align: center;
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
}

/* Lista de pasos */
.app-steps-list {
    margin-top: 20px;
}

.app-step-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer; /* Indica que es interactivo */
}

.app-step-item:last-child {
    border-bottom: 1px solid #f0f0f0;

}

/* Efecto hover para los pasos */
.app-step-item:hover {
    background-color: #fdfdff;
    border: solid #f16200;
    transform: translateX(5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);

}

.app-step-number {
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    /* ¡NUEVO! Asegura que el color de texto sea blanco */
    color: #fff;
}

/* ¡MODIFICADO! Colores de fondo para números de paso (alternando) */
.num-bg-blue {
    background: linear-gradient(45deg, #1a3669, #3b5083); /* Gradiente azul */
}
.num-bg-orange {
    background: linear-gradient(45deg, #f16200, #ff8c3b); /* Gradiente naranja */
}


.app-step-text h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.app-step-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #777;
}

/* Botón de Descarga */
.app-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 30px;
    padding: 16px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    /* ¡MODIFICADO! Gradiente azul para el botón */
    background: linear-gradient(90deg, #1a3669 0%, #3b5083 100%);
    border: none;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(26, 54, 105, 0.2);
}

.app-cta-button svg {
    stroke: #fff; /* Ícono del botón blanco */
    width: 18px;
    height: 18px;
}


/* --- Responsive Design (Sin cambios, solo el hover para móvil) --- */
@media (max-width: 992px) {
    .app-promo-row {
        flex-direction: column;
        gap: 50px;
    }

    .app-promo-left {
        max-width: 600px;
        order: 2;
    }

    .app-promo-right {
        max-width: 600px;
        order: 1;
    }

    .app-promo-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .app-howto-card {
        padding: 30px 25px;
    }

    .app-promo-title {
        font-size: 1.8rem;
    }

    .app-promo-subtitle {
        font-size: 1rem;
    }

    /* Hacemos el hover de los pasos más sutil en móvil */
    .app-step-item:hover {
        background-color: transparent;
        border-color: transparent;
        transform: none;
        box-shadow: none;
    }
}

@media (max-width: 480px) {
    .app-howto-card {
        padding: 30px 25px;
    }

    .app-promo-title {
        font-size: 1.8rem;
    }

    .app-promo-subtitle {
        font-size: 1rem;
    }
}


/* General Styles */


/* Navbar */
.navbar {
    background: #ff6600;
    padding: 15px;
    text-align: center;
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar ul li {
    display: inline;
    margin: 0 15px;
}

.navbar ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
}




/* Estilos para las ventajas rápidas */
.quick-benefits {
    display: flex;
    flex-wrap: wrap; /* Permite que se ajusten */
    gap: 10px;
    margin: 20px 0;
    justify-content: center;
}

.benefit-icon {
    background-color: #fff3cd;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 30%; /* Ocupa 1/3 del ancho */
    min-width: 100px; /* Ancho mínimo */
    text-align: center;
    transition: transform 0.3s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.benefit-icon:hover {
    transform: scale(1.05);
}

/* Estilos para el microtexto de conversión */
.conversion-cta {
    margin-top: 15px;
    padding: 1rem 2rem;

}

@keyframes custom-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.conversion-cta img {
    width: 82%;
    height: 70%;
    animation: custom-fadeInUp 0.8s ease-out forwards;
}

@media (max-width: 768px) {
    .conversion-cta img {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 768px) {
    .quick-benefits {
        flex-direction: column;
        align-items: center;
    }


    .benefit-icon {
        width: 100%;
        text-align: center;
    }


}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .quick-benefits {
        display: none !important;
    }

    .benefit-icon {
        flex: 1 1 30%; /* 3 por fila */
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .benefit-icon {
        flex: 1 1 45%; /* 2 por fila */
        font-size: 0.65rem;
    }
}

/*.content {*/
/*    max-width: 50%;*/
/*}*/

h1 span {
    color: #ff6600;
    font-weight: bold;
}

h1 {
    color: #ff6600;
    font-size: 2.5em;
}

h3 {
    color: #1d3557;
    font-weight: bold;
}

p {
    font-size: 1.2em;
}

/* Buttons */
.buttons {
    margin-top: 20px;
}


.btn-dark {
    background: #1d3557;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-dark:hover {
    background: #f16200;
}

/* Hero Image */
.hero-image {
    position: relative;
    max-width: 50%;
}

.hero-image img {
    width: 100%;
    border-radius: 10px;
}

.image-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 102, 0, 0.3);
    top: 0;
    left: 0;
    border-radius: 10px;
}




/* ============================================== */
/* === SECCIÓN COMPLETA DE FAQ (CSS FINAL) === */
/* ============================================== */

/* 1. EL CONTENEDOR PRINCIPAL (EL FONDO AZULITO) */
.faq-section {
    background-color: var(--color-azul-linntae-20); /* Tu azulito claro */
    border-radius: 15px;
    padding: 40px;
    width: 100%;
    max-width: 1200px; /* Ancho para 2 columnas */
    margin: 40px auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* 2. EL TÍTULO H2 (CENTRADO) */
.faq-section h2 {
    text-align: center;
    color: var(--color-naranja-linntae);
    font-size: 2.2em;
    font-weight: 700;
    margin-bottom: 30px;
}

/* 3. EL GRID DE 2 COLUMNAS (PARA ESCRITORIO) */
.faq-accordion {
    display: grid;
    grid-template-columns: 1fr; /* Default: 1 columna (móvil) */
    gap: 15px; /* Espacio entre items */
}
@media (min-width: 769px) {
    .faq-accordion {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================== */
/* === 4. ESTILOS DEL ACORDEÓN (DETAILS) === */
/* ============================================== */

.faq-accordion details {
    background-color: var(--color-blanco);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}
.faq-accordion details:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.faq-accordion summary {
    padding: 1.25rem;
    font-size: 1.15em;
    font-weight: 600;
    color: var(--color-azul-linntae);
    cursor: pointer;
    list-style: none; /* Remueve la flecha/viñeta */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-accordion summary::-webkit-details-marker {
    display: none;
}

.faq-accordion summary::after {
    content: '+';
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--color-naranja-linntae);
    transition: transform 0.3s ease;
}

.faq-accordion details[open] {
    border-color: var(--color-naranja-linntae);
}
.faq-accordion details[open] summary {
    color: var(--color-naranja-linntae);
}
.faq-accordion details[open] summary::after {
    content: '×';
    transform: rotate(90deg);
}

.faq-accordion details > p {
    padding: 0 1.25rem 1.25rem 1.25rem;
    margin: 0;
    color: #555;
    line-height: 1.6;
    border-top: 1px solid #f0f0f0;
    margin-top: -10px; /* Ajuste para que se vea fluido */
}
/****/



.custom-plans-section {
    padding: 50px 10%;
    background-size: cover;

}


h2 {
    font-size: 2rem;
    margin-bottom: 2px;
}

.custom-orange-text {
    color: #ffffff;
    font-weight: bold;
}

.custom-plans-section h2 {
    font-size: 2rem;
    text-align: center;
}


.custom-subtitle {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 30px;
    text-align: center;
}

/* Cards Container */
.custom-cards-container {

    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* Individual Card */
.custom-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 26px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(1.9px);
    -webkit-backdrop-filter: blur(2.0px);
    border: 1px solid rgba(255, 255, 255, 0.49);
    padding:1.95rem;
    width: 300px;
    animation: custom-fadeInUp 1s ease-in-out forwards;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.3),
    0 4px 30px rgba(0, 0, 0, 0.1);

}
.custom-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px; /* el grosor de la “uñita” */
    background: linear-gradient(180deg, rgba(247,166,35,1) 0%, rgba(237,96,2,1) 63%, rgba(241,98,0,0.98) 100%);
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}



.custom-card {
    color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;

}
.container-text-card {
    text-align: justify;
    line-height: 1.40;
    -webkit-hyphens: auto; /* Para compatibilidad con Safari/iOS */
    -ms-hyphens: auto;     /* Para compatibilidad con IE/Edge viejos */
    hyphens: auto;         /* Estándar moderno */
}

.container-text-card{
    font-style: normal;
    font-size: 0.99rem;
    padding: 5px;

}





.custom-card:hover {
    transform: translateY(-5px) scale(1.09);
    background: rgba(255, 255, 255, 0.20);
    border-radius: 26px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1.8px);
    -webkit-backdrop-filter: blur(1.8px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.4),
    0 10px 25px rgba(0, 0, 0, 0.25);

}
.custom-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Card Icon */
.custom-icon svg {
    width: 50px;
    height: 50px;
    margin-bottom: 0;
    display: block;
    transition: transform 0.8s ease-in-out;
}

/* Rotate Icon on Hover */
.custom-card:hover .custom-icon svg{
    transform: rotate(360deg);
}

/* Card Title */
.custom-card h3 {
    font-size: 1.4rem;
    color: var(--color-azul-linntae-10);
    margin-bottom: 10px;
    text-align: center;
}

/* Card Button */
.custom-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    margin-bottom: 20px;
    padding: 10px 15px;
    background: #f16200;
    color: white;
    font-weight: bold;
    border-radius: 26px;
    border: solid 2px #ffffff;
    text-decoration: none;
    transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.custom-btn:hover {
    background: #F36D1D;
    transform: scale(1.07);
}


.custom-btn:active {
    transform: scale(0.95) rotate(-3deg);
}


@keyframes custom-fadeInUp {
    from {
        opacity: 0;
        margin-top: 30px;
    }
    to {
        opacity: 1;
        margin-top: 0;
    }
}


@media (max-width: 1024px) {
    .custom-plans-section {
        padding: 50px 5%;
    }

    .custom-cards-container {
        flex-direction: column;
        align-items: center;
    }

    .custom-card {
        width: 90%;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    h2 {
        font-size: 1.8rem;
    }

    .custom-subtitle {
        font-size: 1rem;
    }

    .custom-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 1.6rem;
    }

    .custom-card {
        width: 95%;
    }
}

.testimonial-wall {
    width: 100vw;
    max-width: 1200px; /* Límite de ancho en pantallas grandes */
    margin-top: 40px;
    margin-bottom: 40px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 40px 20px;
    box-sizing: border-box;
    color: #ffffff;
    overflow: hidden; /* Oculta lo que se sale */


}

.testimonial-wall h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px; /* Más espacio para que se vea el efecto */
}

/* --- Contenedor del Scroll --- */
.scroller-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* 3 columnas en escritorio */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    /* Altura fija para que el scroll funcione */
    max-height: 600px;
    overflow: hidden; /* Oculta el scrollbar */

    /* El truco: Máscara para el efecto FADE superior e inferior */
    -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%
    );
    mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%
    );
}


.scroller-column {
    display: flex;
    flex-direction: column;
    gap: 20px;


    animation: scroll-up 30s linear infinite;
}


.scroller-column:nth-child(2) {
    animation: scroll-down 40s linear infinite;
}

.scroller-column:nth-child(3) {
    animation: scroll-up 25s linear infinite;
}


@keyframes scroll-up {
    from {
        transform: translateY(0);
    }
    to {

        transform: translateY(-50%);
    }
}

@keyframes scroll-down {
    from {
        transform: translateY(-50%);
    }
    to {
        transform: translateY(0);
    }
}



.testimonial-card-modern {
    background-color: #ffffff;
    color: #333;
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.card-header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.card-header .user-info {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

.card-header .user-info strong {
    font-size: 1.1rem;
    color: #2c3e50;
}

.card-header .user-info span {
    font-size: 0.9rem;
    color: #777;
}

.card-body p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}


@media (max-width: 992px) {
    .scroller-container {

        grid-template-columns: repeat(2, 1fr);
    }

    .scroller-column:nth-child(3) {
        display: none;
    }
}

@media (max-width: 768px) {
    .scroller-container {

        grid-template-columns: 1fr;
        max-height: 500px;
    }

    .scroller-column:nth-child(2) {
        display: none;
    }
    .testimonial-wall h2 {
        font-size: 2rem;
    }
}


/* Footer Styling */
.unique-footer {
    display: flex;
    background: linear-gradient(90deg, var(--color-azul-linntae));
    border-top: solid 3px var(--color-verde-linntae);
    z-index: 1000;
    justify-content: space-evenly;
    box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.25);
    color: white;
    padding: 3rem;
    text-align: left;
    background-color: #08265C;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%230D3D96' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%230D3D96'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.unique-footer-container {
    display: flex;
    flex-direction: column;
}

/* Footer Links */
.unique-footer-link {
    color: white !important;
    text-decoration: none !important;
    font-weight: bold;
    transition: opacity 0.3s ease-in-out;
}

.unique-footer-link:hover {
    opacity: 0.7;
}


/*#acceso-clientes-navbar {*/
/*    color: #1a3669 !important;*/
/*}*/

.datosFooter {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}


.datosFooter li {
    padding: 10px;
    box-sizing: border-box;
}

.datosFooter h5 {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.datosFooter p {
    margin: 0;
    font-size: 1rem;
}

.datosFooter a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    transition: opacity 0.3s ease-in-out;
}

.datosFooter a:hover {
    opacity: 0.7;
}

#socialNetwork {
    display: flex;
    flex-direction: column;
}

#socialNetwork a {
    display: inline-block;
    margin-right: 10px;
    font-size: 1.2rem;
}

.unique-footer-bottom {
    margin-top: 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding-top: 10px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .datosFooter {
        grid-template-columns: 1fr 1fr;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .unique-footer {
        padding: 30px 5%;
    }

    .datosFooter {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .unique-footer-title {
        font-size: 1.3rem;
    }

    .unique-footer-text,
    .datosFooter p {
        font-size: 0.9rem;
    }

    #socialNetwork a {
        font-size: 1rem;
    }
}




.custom-about-section {
    padding: 50px 10%;
    background: var(--color-azul-linntae-10);
    position: relative;
    overflow: hidden;

    .custom-container {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }


    .custom-title {
        font-size: 2.5rem;
        color: #0C2C5E;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
    }

    .custom-small-title {
        font-weight: bold;
        color: var(--color-naranja-linntae-90);
        text-transform: uppercase;
        font-size: 0.9rem;
        text-align: center;
    }


    .about-cards-row {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
        margin-top: 50px;
    }

    .about-card {
        background-color: #fff;
        border-radius: 26px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        text-align: center;
        flex: 1;
        max-width: 350px;
        min-width: 280px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .about-card-orange:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(241, 98, 0, 0.15);

    }

    .about-card-green:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0, 209, 132, 0.15);


    }

    .about-card-blue:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(6, 27, 66, 0.15);


    }

    .about-card-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.05);
    }


    .about-card-icon svg {
        width: 70px;
        height: 70px;
    }

    .about-card-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: #0C2C5E;
        margin-bottom: 15px;
    }

    .about-card-text {
        font-size: 1rem;
        color: #555;
        line-height: 1.6;
    }


    .about-card-orange {
        border-top: 8px solid #f16200;
    }

    .about-card-orange .about-card-icon {
        background-color: rgba(241, 98, 0, 0.1);
    }

    .about-card-green {
        border-top: 8px solid var(--color-verde-linntae-90);
    }

    .about-card-green .about-card-icon {
        background-color: rgba(40, 167, 69, 0.1);
    }

    .about-card-blue {
        border-top: 8px solid var(--color-azul-linntae-dark);
    }

    .about-card-blue .about-card-icon {
        background-color: rgba(0, 123, 255, 0.1);
    }


    .custom-about-section::before,
    .custom-about-section::after {
        content: '';
        position: absolute;
        background-color: #FDEFE6; /* Un color naranja/salmón muy pálido */
        border-radius: 50%;
        z-index: 0; /* Detrás del contenido */
    }


    .custom-about-section::before {
        width: 300px;
        height: 300px;
        top: -100px;
        left: -100px;
        transform: rotate(20deg);
    }


    .custom-about-section::after {
        width: 400px;
        height: 400px;
        bottom: -150px;
        right: -150px;
        transform: rotate(-30deg);
    }


    @media (max-width: 1024px) {
        .custom-about-section {
            padding: 50px 5%;
        }

        .about-cards-row {
            flex-direction: column;
            align-items: center;
        }

        .about-card {
            max-width: 80%;
            margin-bottom: 30px;
        }


        .custom-about-section::before {
            width: 200px;
            height: 200px;
            top: -50px;
            left: -50px;
        }

        .custom-about-section::after {
            width: 250px;
            height: 250px;
            bottom: -70px;
            right: -70px;
        }
    }

    @media (max-width: 768px) {
        .custom-title {
            font-size: 2rem;
        }

        .about-card {
            max-width: 90%;
            padding: 25px;
        }

        .about-card-title {
            font-size: 1.3rem;
        }

        .about-card-text {
            font-size: 0.95rem;
        }
    }

    @media (max-width: 480px) {
        .custom-about-section {
            padding: 30px 3%;
        }

        .custom-title {
            font-size: 1.8rem;
        }

        .about-card {
            max-width: 100%;
            padding: 20px;
        }

        .about-card-icon {
            width: 80px;
            height: 80px;
            margin-bottom: 15px;
        }

        .about-card-icon svg {
            width: 55px;
            height: 55px;
        }

        .about-card-title {
            font-size: 1.2rem;
        }

        .about-card-text {
            font-size: 0.9rem;
        }


        .custom-about-section::before,
        .custom-about-section::after {
            display: none;
        }
    }

    #global-loader {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .loader-spinner {
        border: 5px solid #f3f3f3;
        border-top: 5px solid #ff6600;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    /* ≤ 768px (móvil “normal”) */
    @media (max-width: 768px) {
        .input-group {
            --field-h: 44px;
            --label-font: 12px;
            --input-font: 13px;
            border-radius: 22px;
        }

        /* Título y spacing suaves */
        .register-title {
            font-size: 20px;
        }
    }

    /* ≤ 480px (móvil chico) */
    @media (max-width: 480px) {
        .input-group {
            --field-h: 40px;
            --label-font: 11px;
            --input-font: 12px;
            border-radius: 20px;
        }
    }
}

.section-white {
    background-color: var(--color-azul-linntae-10);
    padding: 60px 0;

}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}


.products-header {
    text-align: center;
    margin-bottom: 50px;
}

.products-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-naranja-linntae-90);
    margin-bottom: 30px;
}

.text-orange {
    color: var(--color-azul-linntae-dark);
}

.textou {
    color: var(--color-verde-linntae);
}


.counters-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.counter-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-naranja-linntae-90);
    margin: 0;
    line-height: 1;
}

.counter-label {
    font-size: 0.9rem;
    color: var(--color-azul-linntae-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}


.owl-carousel .item {
    background: var(--color-blanco);
    border-radius: 26px;
    padding: 20px;
    margin: 10px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}


.owl-carousel .item img {
    max-height: 60px;
    width: auto !important;
    max-width: 100%;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}


.owl-carousel .item:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: solid 0.3rem;
    border-color: var(--color-naranja-linntae-90);
    transform: translateY(-5px);
}

.owl-carousel .item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}
.owl-carousel {
    touch-action: manipulation;
}
.owl-carousel .item img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 1px;
}

.trust-badge-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 26px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(1.9px);
    -webkit-backdrop-filter: blur(2.0px);
    border-bottom: solid 1px;
    padding: 10px 25px;
    border-radius: 50px;
    gap: 15px;
    flex-wrap: wrap;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.3),
    0 4px 30px rgba(0, 0, 0, 0.1);
}
.trust-badge:hover{
    transform: translateY(-5px) scale(1.09);
}
.avatar-group {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.avatar-group img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    margin-left: -15px;
    position: relative;
    z-index: 1;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.avatar-group img:first-child {
    margin-left: 0;
    z-index: 3;
}
.avatar-group img:nth-child(2) { z-index: 2; }
.avatar-group img:nth-child(3) { z-index: 1; }



.badge-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stars {
    color: #ffc107;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.badge-content p {
    color: #ffffff;
    margin: 0;
    font-size: 1rem;
    font-family: sans-serif;
}

.badge-content strong {
    font-weight: 700;
}


@media (max-width: 600px) {
    .trust-badge {
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 15px;
        gap: 10px;
    }
    .badge-content {
        display: contents;
    }
    .avatar-group {
        order: 1;
        margin: 0;
    }

    .stars {
        order: 2;
        display: flex;
        align-items: center;
    }


    .badge-content p {
        order: 3;
        width: 100%;
        text-align: center;
        margin-top: 2px;
        font-size: 0.9rem;
    }
}