/* Estilos generales */
body {
    font-family: Outfit, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2 {
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #161616;
}

.cta-button {
    background-color: #f8b031;
    padding: 10px 20px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

/*--SLIDER PRINCIPAL BEGIN--*/

/* Contenedor principal */
#hero {
    width: 100%; /* Ancho de la sección */
    margin: 0 auto; /* Centrar en la página */
    overflow: hidden;
    position: relative;
    background-color: #161616;
}

  /* Slider */
.slider {
    position: relative;
    width: 100%;
    height: 600px; /* Ajusta según tus necesidades */
}

  /* Pista de diapositivas */
.slides {
    position: relative;
    width: 100%;
    height: 100%;
}

  /* Estilo de cada slide */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Oculta las imágenes por defecto */
    transition: opacity 1s ease-in-out; /* Transición suave */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .slider {
        position: relative;
        width: 100%;
        height: 200px; /* Ajusta según tus necesidades */
    }
}  

/*--SLIDER PRINCIPAL ENDS--*/

/*--TARJETA MÁS PRO CON DESCRIPCIÓN BEGIN--*/

#benefits {
    padding: 50px 20px; /* Ajuste del padding para versiones móviles */
    background-color: #161616;
    margin: 0; /* Elimina márgenes adicionales */
    overflow: hidden; /* Previene problemas de desbordamiento */
}

.benefits-container {
    display: flex;
    align-items: center;
    gap: 50px;
    justify-content: center;
    flex-wrap: wrap; /* Asegura que los elementos no se salgan del contenedor */
}

.benefits-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    height: auto; /* Asegura proporción de la imagen */
}

.benefits-text {
    max-width: 600px;
    text-align: left; /* Texto alineado a la izquierda */
}

.benefits-text p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
    font-family: 'Outfit', sans-serif;
    color: #ffffff;
    font-weight: 400;
}

.benefits-text .cta-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #f8b031;
    color: #161616;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Outfit', sans-serif;
    border-radius: 30px;
    transition: background-color 0.3s;
}

.benefits-text .cta-button:hover {
    background-color: #7d7d7d;
    color:#ffffff;
}

/* Responsividad para la sección de beneficios */
@media (max-width: 768px) {
    .benefits-container {
        flex-direction: column;
        text-align: center;
        gap: 0px; /* Reduce el espacio entre elementos */
    }

    .benefits-image img {
        max-width: 70%;
        margin-bottom: 2px;
    }

    .benefits-text {
        text-align: center; /* Centra el texto en móviles */
        max-width: 90%; /* Ajusta el ancho del texto */
        margin: 0 auto; /* Centra el contenedor */
    }

    .benefits-text p {
        font-size: 16px; /* Reduce el tamaño de la fuente en móviles */
    }
}

/*--TARJETA MÁS PRO CON DESCRIPCIÓN ENDS--*/

/*--SLIDER DE LOGOS DE TIENDAS BEGIN--*/

/*Sección principal*/
.stores_slider235_section {
    width: 100%; /* Se ajusta al ancho del contenedor padre */
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    background: url('../assets/banner-landing-tiendas.png') no-repeat center center/cover;
    color: #fff;
}

.stores_slider235_title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

  /* Contenedor del slider */
.stores_slider235 {
    width: 100%; /* Ocupa todo el ancho disponible del contenedor principal */
    max-width: 1200px; /* Limita el ancho máximo del slider */
    overflow: hidden; /* Oculta las imágenes fuera del área visible */
    position: relative;
    margin: 0 auto; /* Centra el slider horizontalmente */
}

  /* Pista de diapositivas */
.stores_slider235_track {
    display: flex;
    gap: 10px; /* Espaciado entre las imágenes */
    transition: transform 0.3s ease-in-out; /* Transición suave para el movimiento */
    justify-content: flex-start; /* Alinea las imágenes hacia la izquierda */
}

  /* Estilo de los logos */
.stores_slider235_logo {
    flex: 0 0 calc(50% - 10px); /* Cada logo ocupa el 50% del ancho en mobile */
    max-width: calc(50% - 10px); /* Ajusta el tamaño del logo */
    height: auto; /* Mantiene la proporción de las imágenes */
    object-fit: contain; /* Asegura que las imágenes se ajusten sin recortarse */
    border-radius: 8px; /* Bordes ligeramente redondeados */
}

  /* Estilo responsive */
@media (min-width: 769px) {
    .stores_slider235_logo {
      flex: 0 0 calc(20% - 10px); /* En escritorio, cada logo ocupa el 20% */
    max-width: calc(20% - 10px);
    }
}

@media (max-width: 768px) {
    .stores_slider235_title {
        font-size: 1rem;
    }
}

/*--SLIDER DE LOGOS DE TIENDAS ENDS--*/

/*--ASÍ DE FÁCIL ES AHORRAR CON MÁS PRO BEGIN--*/

/* Sección principal */
.seccion-maspro {
    padding: 50px 20px;
    text-align: center;
    background-color: #161616;
    color: #fff;
}

.titulo-maspro {
    font-size: 2rem;
    margin-bottom: 40px;
    font-family: 'Outfit', sans-serif;
}

.columnas-maspro {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap; /* Permite que las columnas se ajusten en pantallas más pequeñas */
}

.columna-maspro {
    max-width: 300px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
}

/* Estilo de los íconos */
.icono-maspro {
    width: 70px; /* Tamaño por defecto en escritorio */
    height: auto; /* Mantiene la proporción del ícono */
    margin-bottom: 20px;
    fill: #FFFFFF; /* Color blanco para los íconos */
}

/* Estilo de los subtítulos */
.subtitulo-maspro {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Estilo de las descripciones */
.descripcion-maspro {
    font-size: 1rem;
    line-height: 1.5;
}

/* Responsive para mobile */
@media (max-width: 768px) {

    .titulo-maspro {
        font-size: 1rem;
    }

    .icono-maspro {
        width: 40px; /* Tamaño reducido en pantallas móviles */
        height: auto; /* Mantiene la proporción del ícono */
    }

    .subtitulo-maspro {
        font-size: 1rem; /* Subtítulos más pequeños en mobile */
        margin: 0;
    }

    .descripcion-maspro {
        font-size: 0.9rem; /* Descripciones más pequeñas en mobile */
    }
}

/*--ASÍ DE FÁCIL ES AHORRAR CON MÁS PRO ENDS--*/

/*--SLIDER SIN TARIFAS OCULTAS, REGISTRO INMEDIATO BEGIN--*/

.unique-sliding-text-container {
    width: 100%;
    overflow: hidden; /* Asegura que el contenido que desborde no sea visible */
    position: relative;
}


.unique-sliding-wrapper {
    position: relative;
    height: 96px; /* Altura de la sección */
    width: 100%; /* El ancho del contenedor principal */
}

.unique-sliding-track {
    display: flex;
    position: absolute;
    width: 100%; /* Cambiará según el número de slides */
    height: 100%;
    transition: transform 1s ease-in-out;
}

.unique-slide {
    flex: 0 0 100%; /* Cada slide ocupa el 100% del ancho del contenedor */
    height: 100%;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
}

.unique-slide-white {
    background-color: #FFFFFF;
}

.unique-slide-yellow {
    background-color: #f8b031;
}

.unique-slide-content {
    text-align: center; /* Centra el texto multilínea */
}

.unique-slide-text {
    font-size: 2rem;
    font-weight: 600;
    color: #000000;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease-in-out;
    font-family: outfit, sans-serif;
}

.unique-slide-text.animate {
    animation: uniqueTextSlideUp 3s ease-in-out;
}

@keyframes uniqueTextSlideUp {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    20% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@media (max-width: 768px) {
    .unique-slide-text {
        font-size: 1.5rem;
        font-weight: 600;
    }
}

/*--SLIDER SIN TARIFAS OCULTAS, REGISTRO INMEDIATO ENDS--*/

/*--¿CÓMO OBTENGO MI TARJETA DIGITAL? BEGIN--*/

#tarjeta_digital_texto {
    display: flex; /* Activa flexbox */
    flex-direction: column; /* Coloca los elementos en una columna */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    height: 300px; /* Altura deseada */
    text-align: center; /* Centra el contenido horizontalmente */
    background-color: #161616;
    color: #fff;
}

.title_20 {
    margin: 0; /* Elimina márgenes adicionales */
    font-size: 2rem;
}

.p_20 {
    margin-left: 200px;
    margin-right: 200px;
    text-align: justify; /* Opcional, para mejorar la apariencia del texto */
}

.cta-button-2 {
    display: inline-block; /* Asegura que el botón se centre correctamente */
    margin-top: 20px; /* Agrega un espacio superior si es necesario */
    padding: 10px 20px; /* Personaliza el tamaño del botón */
    font-size: 16px;
    background-color: #f8b031; /* Cambia el color de fondo */
    color: #161616;
    text-decoration: none;
    border-radius: 30px;
}

.cta-button-2:hover {
    background-color: #7d7d7d;
    color: #ffffff; /* Cambia el color al pasar el cursor */
}

@media (max-width: 768px) {

#tarjeta_digital_texto {
    height: 400px;
}

.title_20 {
    font-size: 1rem;
}

.p_20 {
    font-size: 0.9rem;
    margin-left: 30px;
    margin-right: 30px;
}

.cta-button-2 {
    font-size: 0,9rem;
}

}

/*--¿CÓMO OBTENGO MI TARJETA DIGITAL? ENDS--*/

/*--¿POR QUÉ ELEGIR MÁS PRO? BEGIN--*/

.ventajas-seccion-25 {
    background: url('../assets/benner.jpg') no-repeat center center/cover;
    color: white;
    padding: 2rem;
    text-align: center;
    height: 300px;
}

.ventajas-titulo-25 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.ventajas-contenedor-25 {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.ventaja-columna-25 {
    max-width: 300px;
    text-align: center;
}

.ventaja-icono-25 {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
    color: white;
}

.ventaja-titulo-25 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.ventaja-descripcion-25 {
    font-size: 1rem;
}

@media (max-width: 768px) {
    
    .ventajas-seccion-25 {
        height: 750px;
    }
    
    .ventajas-titulo-25 {
        font-size: 1rem;
    }

    .ventaja-icono-25 {
        width: 40px;
        height: 40px;
        margin-bottom: -15px;
    }

    .ventaja-titulo-25 {
        font-size: 1rem;
    }

    .ventaja-descripcion-25 {
        font-size: 0,9rem;
    }

}

/*--¿POR QUÉ ELEGIR MÁS PRO? ENDS--*/


/*--NO ESPERES MÁS BEGIN--*/

.no_esperes_mas {
    display: flex; /* Activa Flexbox */
    flex-direction: column; /* Organiza los elementos en una columna */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    text-align: center; /* Centra el contenido de texto horizontalmente */
    background-color: #161616; /* Color de fondo */
    color: #fff; /* Color del texto */
    height: 200px; /* Altura del contenedor */
}


.text-122 {
    margin: 0; /* Elimina márgenes adicionales */
    justify-content: center; /* Centra verticalmente */
    font-size: 2rem;
}

@media (max-width: 768px) {
    .text-122 {
        font-size: 1rem;
    }
}

/*--NO ESPERES MÁS ENDS--*/