html {

    scroll-behavior: smooth;

}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(-120deg, #f160001c 3%, #ffffff 25%);
    transition: background 0.3s, color 0.3s

}


/* Header & Navigation */
header {
    background: #ffffff;
    padding: 15px 0;
    width: 100%;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);

}


nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(241, 98, 0, 1) 0%, rgba(237, 128, 55, 1) 20%, rgba(243, 177, 131, 1) 36%, rgba(245, 245, 245, 1) 51%);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
}

.logo {
    font-size: 5px;
    font-weight: bold;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.logo img {
    width: 100px;
    max-width: 100%;

}

@media (max-width: 1024px) {
    .logo img {
        width: 100px; /* Adjust logo size for tablets */
    }
}

@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;
    }

}

.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;

}

.nav-links li a {
    text-decoration: none;
    font-weight: bold;
    font-size: 10.9px;
    color: #1a3669;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    display: inline-block; /* Needed for transform to work properly */
}


.nav-links li {
    display: inline;
}

.nav-links li a:hover {
    transform: translateY(-5px); /* Moves up slightly */
    color: #f26700; /* Change color */
    animation: bounce 0.5s ease-in-out; /* Add bounce animation */
}

/* 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 */
}

.shape {
    position: absolute;
    border-radius: 50%; /* Esto crea las curvas suaves */

    /* Filtro para suavizar los bordes */
    filter: blur(80px);

    /* Animación de ENTRADA (dura 2s, 1 vez, y se queda al final) */
    animation: slideIn 2s 1 forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 🎨 Paleta de colores Pastel/Naranja/Gris */
.shape-1 {
    width: 600px;
    height: 600px;
    background: rgba(241, 98, 0, 0.15); /* Naranja pastel */
    top: -200px;
    right: -150px;
    transform: translateX(300px); /* Posición inicial (fuera) */
    animation-delay: 0.1s;
}

.shape-2 {
    width: 500px;
    height: 500px;
    background: rgba(108, 117, 125, 0.1); /* Gris pastel */
    bottom: -150px;
    left: -100px;
    transform: translateX(-300px); /* Posición inicial (fuera) */
    animation-delay: 0.3s;
}

.shape-3 {
    width: 300px;
    height: 300px;
    background: rgba(241, 98, 0, 0.1); /* Naranja más suave */
    bottom: 50px;
    right: 30%;
    transform: translateY(200px); /* Posición inicial (fuera) */
    animation-delay: 0.2s;
}

/* 🚀 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 */
}
.icon-1 {
    top: 15%;
    left: 10%;
    animation-duration: 10s;
}
.icon-2 {
    top: 30%;
    left: 35%;
    animation-duration: 12s;
    animation-delay: -3s;
}
.icon-3 {
    top: 20%;
    left: 80%;
    animation-duration: 9s;
    animation-delay: -1s;
}
.icon-4 {
    top: 60%;
    left: 90%;
    animation-duration: 11s;
    animation-delay: -5s;
}
.icon-5 {
    top: 70%;
    left: 15%;
    animation-duration: 13s;
    animation-delay: -2s;
}
.icon-6 {
    top: 80%;
    left: 55%;
    animation-duration: 10s;
    animation-delay: -6s;
}
.icon-7 {
    top: 50%;
    left: 5%;
    animation-duration: 8s;
    animation-delay: -4s;
}
.icon-8 {
    top: 45%;
    left: 65%;
    animation-duration: 12s;
    animation-delay: -0.5s;
}

/* 🚀 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 Section */
.area {
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap:70px;



}

.hero-content {
    max-width: 50%;
    z-index: 2;
}

.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: #08265c;
    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: #333;
    margin-top: 10px;
}


.buttons {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping for different alignments */
    gap: 10px; /* Space between buttons */
    align-items: center; /* Align buttons vertically */

}

.btn,
.google-btn{
    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);
}
.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;


    }

    .nav-links {
        display: none;
        flex-direction: column;
        background: #ffffff;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        text-align: left;
        border-width: 2px;
        padding: 20px 15px;
        box-shadow: 10px 2px 0px rgba(0, 0, 0, 0.219);
        z-index: 3;
    }


    .nav-links.active {
        display: flex;
    }

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

        color: #f16200;
        z-index: 3;
    }

    .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-between;
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
}

/* 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: column;
    align-items: center; /* Centers the buttons horizontally */
    width: 100%; /* Ensures full width for centering */

}

.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 {
        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%;

}

/* 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;
}

/* NUEVO GRUPO DE INPUT (CLAVE DEL DISEÑO) */

.input-group{
display: flex;
align-items:center;
background-color: #fffffff;
border: 1px solid #e2e8f0;
border-left: 1px solid #e2e8f0;
border-radius: 26px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
overflow: hidden; /*para que el label no se salga del borde redondeado*/

}

.input-group:focus-within{
border-color: #f97316;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
}
/*--ETIQUETAS (LABELS) ESTILO "PILL"----*/
.input-group label{
font-size: 14px;
font-weight:bold;
color: white;
background-color: #1a3669;
padding: 12px 18px;
white-space: nowrap; /*Evita que el texto se parta en dos lineas*/

}
.input-group label span {
  color: #fff;
  margin-right: 4px;
}
/*--ESTILOS PARA INPUTS Y SELECTS--*/

.input-group input,
.input-group select{
width: 100%;
padding: 12px;
font-size: 14px;
border:none;
outline: none;
background-color: white;
flex-grow: 1;

}

.input-group select{
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23475569' viewBox='0 '0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
padding-right: 40px; /* Espacio para la flecha */
}

.register-form label {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
}

/* Inputs & Selects */
.register-form input,
.register-form select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #dddddd;
    border-radius: 0 25px 25px 0;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

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

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

/* Register Button */
.register-button {
    background: #08265c;
    color: white;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 26px;
    cursor: pointer;
    transition: 0.3s;
}

.register-button:hover {
    background: linear-gradient(180deg, #2770f9, #004991 70.71%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    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: #f16200;
    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);
}

.google-register:hover {
    background: linear-gradient(180deg, #f16200, #f8b88d 70.71%);
    color: white;
    box-shadow: 04px 4px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid rgb(255, 255, 255);


}
.google-register 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;
    }
}

/* ====== FORM FIELD SIZING (desktop base) ====== */
.input-group{
  --field-h: 48px;         /* altura del control */
  --label-font: 14px;      /* tamaño del texto del badge */
  --input-font: 14px;      /* tamaño del texto del input/select */
  border-radius: 26px;
 align-items: center !important;    /* estira hijos a la misma altura */
}

.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);
    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: 16px;
    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{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px; /* izq texto+pills / der simulación */
  gap:28px;
  align-items:start;
  max-width:1200px;
  margin:40px auto;
  padding:0 16px;
}

/* 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){
  #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, #ffffff 0%, #fff7f2 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" */

    /* 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;
}

/* La tarjeta individual de cada logo */
.slide {
    flex: 0 0 240px;
    display: grid;
    place-items: center;
    background: #ffffff;
    border-radius: 16px;
    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);
}

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

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

/* --- Tarjeta de Estadísticas Animada --- */
.stats-card {
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 20px;
    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, #eee5df 2%, #fdfdfdb2 10%);
    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: 12px;
    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: 16px;
    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);
}

.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 */
    }
}
/*Container carrusel pagos de servicios*/

/* General Styling */
.interactive-carousel-container {
    text-align: center;
    position: relative;
    padding: 50px 20px;
}

/* Carousel Wrapper */
.carousel-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Arrows */
.carousel-arrow {
    background: none;
    border: none;
    font-size: 30px;
    color: #f26700;
    cursor: pointer;
    transition: 0.3s;
}

.carousel-arrow:hover {
    color: #08265c;
}

.dark-mode .carousel-arrow:hover {
    color: #ffffff;
}

/* Icons Container */
.carousel-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Side Icons */
.carousel-side-icon {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
}

.carousel-side-icon img {
    width: 50px;
}

/* Center Icon */
.carousel-center-icon {
    width: 130px;
    height: 130px;
    background: #08265c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease-in-out;
}

.carousel-center-icon img {
    width: 60px;
}

/* Arc Styling */
.carousel-arc {
    width: 80%;
    height: 50px;
    margin: 20px auto;
    border-top: 8px solid linear-gradient(to right, #eee5df, #eee5df);
    border-radius: 50%;
}

/* Text Below Carousel */
.carousel-text {
    max-width: 600px;
    margin: 20px auto;
}

.carousel-text h2 {
    font-size: 24px;
    color: #08265c;
}

.carousel-text p {
    font-size: 16px;
    color: #f26700;
}


/* Responsive Design */

/* Tablet (≤1024px) */
@media screen and (max-width: 1024px) {
    .carousel-side-icon {
        width: 80px;
        height: 80px;
    }

    .carousel-center-icon {
        width: 110px;
        height: 110px;
    }

    .carousel-text h2 {
        font-size: 20px;
    }

    .carousel-text p {
        font-size: 14px;
    }
}

/* Mobile (≤768px) */
@media screen and (max-width: 768px) {
    .carousel-icons {
        gap: 10px;
    }

    .carousel-side-icon {
        width: 60px;
        height: 60px;
    }

    .carousel-center-icon {
        width: 90px;
        height: 90px;
    }

    .carousel-text h2 {
        font-size: 18px;
    }

    .carousel-text p {
        font-size: 12px;
    }
}


/* 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(180deg, #ffffff, #f8b88d);
}


/* 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: 10px;
    text-align: center;
    width: 250px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

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

.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%;
    }
}


/* 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 el badge de confianza */
.trust-badge {
    background-color: #f8f9fa;
    color: #2d373c;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: inline-block;
    border: 2px solid #e2e8f0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.trust-badge:hover{
 transform: scale(1.05);
}

/* 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;
    font-size: 0.85rem;
    color: #2f855a;
    font-weight: 600;
    text-align: center;
    background-color: #ebf8f7;
    padding: 10px 15px;
    border-radius: 20px;
    border: 5px solid #c6f6d5;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

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

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

    .trust-badge {
        font-size: 0.85rem;
        padding: 6px 12px;
    }
}

/* 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;
}


/* FAQ Section */
.faq-section {
    max-width: 50%;
    margin: 100px auto;
}

h2 {
    color: #ff6600;
    font-size: 2em;
}

/* FAQ Container */
.faq-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

/* FAQ Item */
.faq-item {
    display: flex;
    align-items: flex-start;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    width: 48%;
    transition: transform 0.3s ease-in-out;
}

/* FAQ Icon */
.faq-icon {
    font-size: 24px;
    margin-right: 15px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.faq-icon:hover {
    transform: scale(1.3);
}

/* FAQ Text */
.faq-text h3 {
    font-size: 1.2em;
    color: #1d3557;
    transition: transform 0.3s ease-in-out;
}

.faq-text p {
    font-size: 1em;
    color: #555;
    transition: transform 0.3s ease-in-out;
}

/* Responsive Design */
@media (max-width: 1024px) {
    /* Tablets */
    .faq-container {
        flex-direction: column;
        align-items: center;
    }

    .faq-item {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    /* Smartphones */
    h2 {
        font-size: 1.5em;
        text-align: center;
    }

    .faq-container {
        width: 100%; /* Full width */
        max-width: 100%; /* Prevents stretching too much */
        padding: auto; /* Keep consistent spacing */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
        margin: auto;


    }

    .faq-text h3 {
        font-size: 1.3em;

    }

    .faq-text p {
        font-size: 0.9em;

    }

    .faq-item {
        width: 100%; /* Use full width of the container */
        max-width: 768px; /* Increase width to match other containers */
        display: flex;
        flex-direction: column;
        align-items: center; /* Center content */
        justify-content: center;
        background: white;
        padding: 25px; /* Increase padding */
        border-radius: 15px; /* Adjust border radius */
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); /* Match other elements */
    }

    .faq-icon {
        font-size: 24px;
        align-self: center;

    }


}


/****/


/* Section Header */
.custom-plans-section {
    padding: 50px 10%;
    background-image: url(https://storage.googleapis.com/linn-files/LinntaeWebPage/Formulario/ineedyou.png);
    background-repeat: no-repeat;
    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 {
    background: white;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out;
    opacity: 0;
    animation: custom-fadeInUp 1s ease-in-out forwards;
    border-bottom: 4px solid transparent;

}

/* Adding delay to make animations sequential */
/* Animations Delay */
.custom-card:nth-child(2) {
    animation-delay: 0.4s;
}

.custom-card:nth-child(3) {
    animation-delay: 0.5s;
}

/* Hover Effects */
.custom-card {
    color: #1a3669;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out;
}


/* Zoom + Lift Effect on Hover */
.custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    background: linear-gradient(#f16200, #f89e63);
    border-bottom: 4px solid #F36D1D;

}

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

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

/* Card Title */
.custom-card h3 {
    font-size: 1.4rem;
    color: #0C2C5E;
    margin-bottom: 10px;
}

/* Card Button */
.custom-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #0C2C5E;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Button Hover Effect - Scale Up */
.custom-btn:hover {
    background: #F36D1D;
    transform: scale(1.07);
}

/* Button Click Effect - Slight Rotation */
.custom-btn:active {
    transform: scale(0.95) rotate(-3deg);
}

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

/* Responsive Design */
@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%;
    }
}


/* Footer Styling */
.unique-footer {
    background: linear-gradient(90deg, rgba(241, 98, 0, 1) 0%, rgba(255, 179, 128, 1) 50%, rgba(255, 150, 123, 1) 100%);
    z-index: 1000;
    box-shadow: 0px -10px 50px rgba(0, 0, 0, 0.3);
    color: white;
    padding: 30px 10%;
    text-align: left;
}

.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;
    }
}

/* About Section */
.custom-about-section {
    padding: 50px 10%;
    background: linear-gradient(180deg, #ffffff, #f8b88d);
}

/* Container */
.custom-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Rows */
.custom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

/* Image */
.custom-image img {
    width: 250px;
    max-width: 100%;
    border-radius: 20px;
    transition: transform 0.3s ease-in-out;
}

/* Image Hover Effect */
.custom-image img:hover {
    transform: scale(1.05);
}

/* Text */
.custom-text {
    flex: 1;
    text-align: left;
}

/* Titles */
.custom-title {
    font-size: 2rem;
    color: #0C2C5E;
    font-weight: bold;
    margin-bottom: 10px;
}

.custom-orange {
    color: #f16200;
}

/* Small Title */
.custom-small-title {
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Paragraph */
.custom-text p {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 15px;
}

/* Reverse Row for Second Section */
.custom-reverse {
    flex-direction: row-reverse;
}

/* Fade-in Animation */
.custom-row {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-in-out forwards;
}

.custom-row:nth-child(2) {
    animation-delay: 0.3s;
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 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;
    }
}

#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;
  }
}