/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11-ago-2026, 10:30:21
    Author     : usuario
*/

.brand-badge {
    background-color: #eec237; /* Amarillo corporativo de Sea Lume */
    border-radius: 0.75rem;
    display: inline-block;
    padding: 1.25rem 2.5rem;
    position: relative;
    margin-bottom: 2rem;
}

/* Texto dentro de la caja */
.brand-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -1.5px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

/* Trazo curvo debajo de "Sea" */
.brand-swoosh {
    position: absolute;
    bottom: 20%;
    left: 2.5rem;
    width: 80px;
    height: 20px;
    pointer-events: none;
    z-index: 1;
}

/* Párrafo descriptivo */
.brand-description {
    font-size: 1.05rem;
    color: #888888; /* Gris medio/claro */
    line-height: 1.7;
    max-width: 750px; /* Limita el ancho para que el texto haga saltos de línea */
    margin-bottom: 4rem;
}
.active>.page-link, .page-link.active {
    z-index: 0 !important;
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
}
/* --- Estilos para pantallas grandes (> 500px) --- */
.contenedor-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
@media (max-width: 500px) {
    .contenedor-flex {
        flex-direction: column;
        align-items: baseline; 
        gap: 20px;
    }
}

li.active {
    &:before, &:after {
        background: none !important;
        color: #6c757d !important; 
    }
}