/*
 * Gandy ID
 * Ajustes sobre Start Bootstrap New Age.
 *
 * El CSS original del template permanece intacto en:
 * public/vendor/new-age/css/styles.css
 */

:root {
    --gandy-blue: #2f73c9;
    --gandy-blue-dark: #174b8b;
    --gandy-navy: #102c5a;
    --gandy-soft: #eef6ff;
}


/* =========================================================
 * Base
 * ========================================================= */

body {
    color: #17233a;
}


/* =========================================================
 * Navbar
 * ========================================================= */

#mainNav {
    min-height: 72px;
}

.gandy-navbar-brand img {
    display: block;
    width: 108px;
    height: auto;
}

#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-brand:hover,
#mainNav .navbar-brand:active {
    color: var(--gandy-blue);
}


/* =========================================================
 * Bootstrap / marca
 * ========================================================= */

.btn-primary {
    --bs-btn-bg: var(--gandy-blue);
    --bs-btn-border-color: var(--gandy-blue);
    --bs-btn-hover-bg: #2664b1;
    --bs-btn-hover-border-color: #2664b1;
    --bs-btn-active-bg: #205a9f;
    --bs-btn-active-border-color: #205a9f;
}

.bg-gradient-primary-to-secondary {
    background:
        linear-gradient(
            45deg,
            #123d75,
            #3486d9
        ) !important;
}

.text-gradient {
    background:
        -webkit-linear-gradient(
            #184d8d,
            #43a0ee
        );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
 * Hero principal
 *
 * El navbar ahora debe usar sticky-top.
 * Por eso NO necesitamos margin-top manual.
 * ========================================================= */

.gandy-masthead {
    padding-top: 4rem;
    padding-bottom: 5rem;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 100%
        );
}

.gandy-kicker {
    color: var(--gandy-blue);

    font-size: .75rem;
    font-weight: 800;

    letter-spacing: .13em;
}

.gandy-hero-title {
    color: var(--gandy-navy);
}

.gandy-hero-title span {
    color: var(--gandy-blue);
}

.gandy-hero-copy {
    max-width: 42rem;
}


/* =========================================================
 * Buscador Gandy ID
 * ========================================================= */

#buscar {
    /*
     * El navbar es sticky.
     * Evita que el ancla quede debajo de él al navegar.
     */
    scroll-margin-top: 100px;
}

.gandy-search-card {
    max-width: 42rem;

    border-radius: 1.25rem;
}

.gandy-search-logo {
    width: 42px;
    height: 42px;

    object-fit: contain;
}

.gandy-id-input {
    border-radius: .9rem;

    font-size: 1rem;
    letter-spacing: .025em;
}

.gandy-search-button {
    border-radius: .9rem;
}


/* =========================================================
 * Imagen hero
 * ========================================================= */

.gandy-hero-image-wrap {
    max-width: 34rem;

    margin-inline: auto;
}

.gandy-hero-image {
    display: block;

    width: 100%;
    max-height: 620px;

    object-fit: cover;
    object-position: center;

    background: #edf5ff;
}


/* =========================================================
 * Secciones
 * ========================================================= */

.gandy-brand-strip {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.gandy-feature-image-wrap {
    max-width: 27rem;

    margin-inline: auto;
}

.gandy-feature-image {
    width: 100%;
    max-height: 610px;

    object-fit: cover;
    object-position: center;

    background: #edf5ff;
}


/* =========================================================
 * Cards de personajes
 * ========================================================= */

.gandy-character-card {
    overflow: hidden;

    border: 1px solid #dce6f2;
    border-radius: 1.4rem;

    background: #ffffff;

    box-shadow:
        0 1rem 2.5rem
        rgba(
            18,
            50,
            91,
            .08
        );
}

.gandy-character-card img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: center;
}

.gandy-character-card figcaption strong,
.gandy-character-card figcaption span {
    display: block;
}

.gandy-character-card figcaption strong {
    color: var(--gandy-navy);

    font-size: 1.1rem;
}

.gandy-character-card figcaption span {
    margin-top: .2rem;

    color: #6c757d;

    font-size: .82rem;
}


/* =========================================================
 * CTA fotográfico
 *
 * HTML:
 * <section class="cta gandy-home-cta">
 * ========================================================= */

.gandy-home-cta {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.gandy-home-cta::before {
    background:
        linear-gradient(
            90deg,
            rgba(7, 31, 73, .86) 0%,
            rgba(7, 31, 73, .68) 45%,
            rgba(7, 31, 73, .18) 100%
        );
}


/* =========================================================
 * Profesionales
 * ========================================================= */

.gandy-professional-copy {
    max-width: 44rem;
}


/* =========================================================
 * Footer
 * ========================================================= */

.gandy-footer-logo {
    display: block;

    width: 240px;
    max-width: 75vw;
    height: auto;

    margin-left: auto;
    margin-right: auto;

    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;

    filter: none;

    opacity: 1;

    object-fit: contain;
}


/* =========================================================
 * Tablet
 * ========================================================= */

@media (max-width: 991.98px) {

    .gandy-navbar-brand img {
        width: 100px;
    }


    /*
     * Ya no compensamos navbar.
     * sticky-top mantiene el navbar dentro del flujo.
     */
    .gandy-masthead {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }


    .gandy-search-card {
        margin-inline: auto;
    }


    .gandy-hero-image-wrap {
        max-width: 31rem;
    }


    /*
     * Reencuadre del CTA.
     * Lleva a Gandy más hacia el centro visual.
     */
    .gandy-home-cta {
        background-position: 72% center;
    }

}


/* =========================================================
 * Teléfono
 * ========================================================= */

@media (max-width: 575.98px) {

    .gandy-navbar-brand img {
        width: 88px;
    }


    .gandy-masthead {
        padding-top: 2rem;
        padding-bottom: 3.5rem;
    }


    .gandy-kicker {
        font-size: .68rem;

        letter-spacing: .11em;
    }


    .gandy-hero-title {
        font-size:
            clamp(
                3.1rem,
                14vw,
                4.4rem
            );

        line-height: .95;
    }


    .gandy-hero-copy {
        font-size: 1.1rem;
        line-height: 1.55;
    }


    .gandy-search-card .card-body {
        padding: 1rem !important;
    }


    .gandy-hero-image {
        max-height: 460px;
    }


    .gandy-brand-strip {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }


    /*
     * CTA en teléfono.
     */
    .gandy-home-cta {
        padding-top: 8rem;
        padding-bottom: 8rem;

        background-position: 76% center;
    }


    .gandy-home-cta::before {
        background:
            rgba(
                7,
                31,
                73,
                .66
            );
    }


    .gandy-home-cta h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.6rem
            );
    }

}