/* assets/css/links.css */

/* Banner de imagen superior */
/* assets/css/links.css */

.links-banner-img {
    width: 100%;
    /* En lugar de un alto fijo de 450px, usamos la relación de aspecto de la foto */
    aspect-ratio: 21 / 9; /* Esto la hace ancha y no tan alta, ideal para banners */
    
    background-size: contain; /* 'contain' asegura que se vea TODA la imagen */
    background-repeat: no-repeat;
    background-position: center top; /* Alineamos arriba para no perder la acción */
    background-color: #ffffff; /* Fondo blanco por si la imagen es más corta que el ancho */
    
    /* Si prefieres seguir usando 'cover' pero que no corte lo importante: */
    /* background-size: cover; */
    /* background-position: center 20%; */ /* Ajusta este % para subir o bajar la foto */
}

/* Si la imagen se ve con franjas blancas a los lados, usa este: */
.links-banner-img-v2 {
    width: 100%;
    height: auto;
    display: block;
}

/* Título de la sección */
.nx-section-title-large {
    color: #003366; /* Azul Marino NX */
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* Espaciado para las secciones de Link de Pago */
.links-features {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* El check en esta página también debe ser naranja */
.links-features .nx-check-list i {
    color: #ff9d5c;
    font-weight: bold;
}

/* Aseguramos que el título de sección tenga el color correcto */
.nx-section-title {
    color: #003366;
    font-weight: 800;
    font-size: 2.5rem;
}

/* Ajustes para la Sección 3 BNPL */
.links-bnpl {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.links-bnpl .nx-section-title-large {
    font-size: 3rem; /* Un poco más grande para destacar el BNPL */
    color: #003366;
    margin-bottom: 1.5rem;
}

/* Espaciado de los checks en esta sección */
.links-bnpl .nx-check-list li {
    margin-bottom: 20px;
    font-size: 1.15rem;
}

/* Estilo final para la Sección 4 */
.links-tokenization {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

.links-tokenization .nx-check-list li {
    margin-bottom: 15px;
    font-size: 1rem; /* Un poco más compacto para los textos largos */
}


/* Responsivo para móviles */
@media (max-width: 768px) {
    .links-banner-img {
        height: 250px;
    }
    .nx-section-title-large {
        font-size: 1.8rem;
    }
}