:root {
    --brand: #1aa6ff;
    --brand-2: #7ce9ff;
    --ink: #0c2238;
    --glass: rgba(255, 255, 255, .12);
    --bg-top: #f6fbff;
    --bg-bottom: #ffffff;
    --navH: 64px;
    /* ===== Footer ===== */
    --footer-bg: #0b2440;
    /* dark principal */
    --footer-bg-2: #0e2c4f;
    /* dark secundario */
    --footer-link: #e6f2ff;
}

* {
    box-sizing: border-box
}

body {
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    padding-top: var(--navH);
}

.bg-body {
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

.site-footer {
    color: #eaf2fb;
    background: linear-gradient(180deg, var(--footer-bg) 0%, var(--footer-bg-2) 100%);
    position: relative;
}

.footer-wave {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    line-height: 0;
    pointer-events: none;
}

.footer-wave svg {
    display: block;
    width: 100%;
    height: 100px;
    transform: rotate(180deg);
}

.footer-wave path {
    fill: var(--bg-bottom, #ffffff);
}

/* se funde con el fondo anterior */

.footer-logo {
    height: 44px;
    width: auto;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .25));
}

/* OLA ENTRE SECCIONES (invertida para “entrar” al footer) */
.wave-between {
    position: relative;
    line-height: 0;
    margin-top: -1px;
    /* evita línea de unión */
    pointer-events: none;
}

.wave-between svg {
    display: block;
    width: 100%;
    height: 120px;
}

.wave-between--invert svg {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

/* 👉 color sólido */
.wave-between path {
    fill: var(--footer-bg);
    /* elimina cualquier sombra/efecto */
    filter: none;
}

/* Ocultar olas en móviles */
@media (max-width: 576px) {

    .wave-sep,
    .wave-between,
    .footer-wave {
        display: none !important; 
    }

    /* Compensar el espacio que daban las olas */
    #subhero {
        margin-bottom: 12px;
    }

    /* antes la ola separaba visualmente */
    #sponsors {
        padding-top: 12px;
    }

    /* si la ola iba arriba del bloque */
    .site-footer {
        margin-top: 12px;
    }

    /* si quitaste la ola superior del footer */
}

.btn-social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    display: grid;
    place-items: center;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.btn-social:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .45);
}

.footer-links a {
    color: var(--footer-link);
    text-decoration: none; 
}

.footer-links li {
    line-height: 1.9rem;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-contact li {
    margin-bottom: .35rem;
}

.footer-contact a {
    color: #ffffff;
    text-decoration: none;
}

.footer-contact a:hover {
    text-decoration: underline;
}

.btn-ticket {
    border-radius: 999px;
    background: linear-gradient(135deg, #ffa646 0%, #ff7b00 100%);
    color: #111;
    font-weight: 700;
    border: 0;
    padding: .7rem 1rem;
    box-shadow: 0 10px 24px rgba(255, 123, 0, .25);
}

.btn-ticket:hover {
    filter: brightness(.95);
    color: #111;
}

.footer-bottom {
    background: rgba(0, 0, 0, .15);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.opacity-85 {
    opacity: .85;
}

.grad-text {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.badge.bg-glass {
    background: rgba(255, 255, 255, .25);
    backdrop-filter: blur(6px);
}

.wave-sep {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    /* -1px para ocultar cualquier borde duro */
    z-index: 3;
    /* por encima de .hero-fade y .hero-bg */
    line-height: 0;
    pointer-events: none;
}

.wave-sep svg {
    display: block;
    width: 100%;
    height: 120px;
    /* ¡importante! dale altura */
}

.wave-sep--flip svg {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

/* Cards & glass */
.card {
    border: 0;
    border-radius: 1.25rem
}

.card.lift {
    transition: transform .2s ease, box-shadow .2s ease
}

.card.lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08)
}

.glass {
    background: var(--glass);
    backdrop-filter: blur(8px);
    color: #fff
}

.highlight {
    background: linear-gradient(135deg, var(--brand) 0%, #605dff 100%);
    color: #fff
}

.bg-cover {
    background-size: cover;
    background-position: center
}
 
/* ===== Preloader ===== */
/* ===== Preloader ===== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #d8f2ff 0%, #b6e8ff 100%);
    /* 🌊 azul claro */
    transition: opacity .35s ease, visibility .35s ease;
}

.preloader__inner {
    text-align: center;
}

.preloader__logo {
    width: 180px;
    max-width: 60vw;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .15));
    animation: logoPop .5s ease both;
}

@keyframes logoPop {
    from {
        transform: translateY(10px) scale(.97);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

.preloader__bar {
    margin: 18px auto 0;
    width: 180px;
    max-width: 60vw;
    height: 3px;
    background: rgba(255, 255, 255, .4);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.preloader__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .95), rgba(255, 255, 255, .25));
    animation: loadStripe 1.1s linear infinite;
}

@keyframes loadStripe {
    to {
        transform: translateX(100%)
    }
}

.preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {

    .preloader__logo,
    .preloader__bar::after {
        animation: none;
    }
}
/* ===== Preloader End===== */


/* Pricing section */
#pricing {
    position: relative
}

.pricing-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0ea5e9 0%, #2563eb 100%);
    opacity: .95
}

#pricing .card {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12)
}

#pricing .card .bi {
    vertical-align: -.125em
}


/* Buttons */
.btn {
    border-radius: .85rem
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand)
}

.btn-primary:hover {
    filter: brightness(.95)
}

.btn-outline-light {
    border-color: #fff;
    color: #fff
}

.btn-outline-light:hover {
    background: #fff;
    color: #0b2440
}


/* Utility */
.z-2 {
    z-index: 2
}

.opacity-75 {
    opacity: .75
}

:root {
    --overlay: rgba(0, 0, 0, .45)
}

.parallax {
    background: url('/assets/img/hero.webp') center/cover fixed no-repeat;
    position: relative;
}

.parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay);
}

.parallax>.container {
    position: relative;
    z-index: 2;
}

.parallax--secondary {
    background-image: url('/assets/img/waves.webp');
}


.card {
    border: 0;
    border-radius: 1rem;
}

.btn {
    border-radius: .75rem;
}

/* --- NAVBAR --- */
/* Navbar transparente con gradiente hacia abajo (mejor legibilidad sobre heroes claros) */
.nav-glass {
    /* degradado vertical: oscuro -> semitransparente -> transparente */
    background: linear-gradient(to bottom,
            rgba(11, 36, 64, .70) 0%,
            rgba(11, 36, 64, .45) 55%,
            rgba(11, 36, 64, 0) 100%);
    backdrop-filter: blur(6px);
    transition: background-color .25s ease, background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* Al hacer scroll: fondo oscuro sólido (como ya tenías) */
.nav-solid {
    background: rgba(11, 36, 64, .92);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

/* Menú móvil desplegado: siempre fondo sólido para contraste */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse.show {
        background: rgba(11, 36, 64, .98);
        backdrop-filter: blur(8px);
        border-bottom-left-radius: .75rem;
        border-bottom-right-radius: .75rem;
    }
}

/* Asegura contraste de enlaces/botón */
.navbar .nav-link {
    color: #eef6ff;
}

.navbar .nav-link:hover {
    color: #ffffff;
}

/* ===== Navbar logo ===== */
.nav-logo {
    height: 42px;
    /* ajusta según tu logo */
    width: auto;
    object-fit: contain;
    transition: transform .2s ease;
}

.navbar-brand:hover .nav-logo {
    transform: scale(1.05);
}

/* Responsive: logo más pequeño en móviles */
@media (max-width: 576px) {
    .nav-logo {
        height: 34px;
    }
}


/* HERO básico con parallax + slides */
#hero {
    min-height: 75vh;
    margin-top: calc(-1 * var(--navH));
        /* sube el hero bajo el nav */
        padding-top: var(--navH);
        /* compensa el contenido */
        z-index: 0;
    display: grid;
    place-items: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    z-index: 1;
    /* por debajo del contenido */
}

/* Capas del slideshow */
.hero-bg .slide {
    position: absolute;
    inset: 0;
    background: center/cover no-repeat;
    opacity: 0;
    transition: opacity 900ms ease-in-out;
    filter: contrast(1) brightness(.9);
}

.hero-bg .slide.active {
    opacity: 1;
}

/* Asigna tus imágenes */
.hero-bg .slide.s1 {
    background-image: url('../img/banners/b1.jpg');
}

.hero-bg .slide.s2 {
    background-image: url('../img/banners/b2.jpg');
}

.hero-bg .slide.s3 {
    background-image: url('../img/banners/b3.jpg');
}



@supports not (background: url("../img/banners/b1.jpg")) {
    .hero-bg .slide.s1 {
        background-image: url('../img/banners/b1.jpg');
    }

    .hero-bg .slide.s2 {
        background-image: url('../img/banners/b2.jpg');
    }

    .hero-bg .slide.s3 {
        background-image: url('../img/banners/b3.jpg');
    }
}

/* --- Scroll to top button --- */
.scroll-top-btn {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1050;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand) 0%, #605dff 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(12px) scale(.95);
    transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease;
    cursor: pointer;
    pointer-events: none;
    /* oculto por defecto */
}

.scroll-top-btn:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, .22)
}

.scroll-top-btn.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.scroll-top-btn i {
    font-size: 1.15rem;
}

/* ===== Feature cards ===== */
.feature-card {
    --ring: rgba(26, 166, 255, .35);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .35rem;
    min-height: 160px;
    /* altura mínima uniforme */
    height: 100%;
    /* ocupa toda la col */
    padding: 1.25rem 1.1rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e8eef6;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .06);
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    overflow: hidden;
}

.feature-card h3 {
    margin: .25rem 0 0;
    font-size: 1.05rem;
    color: #0f172a;
    font-weight: 600;
}

.feature-card p {
    margin: 0;
    color: #475569;
}

.feature-card .fc-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #e6f6ff 0%, #f1fbff 100%);
    border: 1px solid #d9edf8;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);
}

.feature-card .fc-icon i {
    font-size: 1.6rem;
    color: #1aa6ff;
    transition: transform .25s ease;
}

/* Halo/borde en hover con gradiente */
.feature-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: radial-gradient(120% 120% at 0% 0%, var(--ring) 0%, transparent 60%),
        radial-gradient(120% 120% at 100% 100%, var(--ring) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(16, 24, 40, .12);
    border-color: #cfe7fb;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card:hover .fc-icon i {
    transform: translateY(-2px) scale(1.05);
}

/* Accesibilidad: reduce motion respeta usuario */
@media (prefers-reduced-motion: reduce) {

    .feature-card,
    .feature-card .fc-icon i {
        transition: none;
    }
}

/* ===== Sponsors marquee ===== */
#sponsors {
    background: var(--bg-top);
}

/* opcional, una franja muy clara */
.logo-marquee {
    overflow: hidden;
    position: relative;
    /* desvanecer bordes laterales */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 64px;
    animation: marqueeScroll 22s linear infinite;
    will-change: transform;
}

.marquee-track img {
    height: 60px;
    width: auto;
    object-fit: contain;
    opacity: .85;
    /* filter: grayscale(100%); */
    transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}

.marquee-track img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-2px);
}

/* velocidad y loop. Ajusta el translateX si añades/quitas logos */
@keyframes marqueeScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

    /* -50% porque duplicamos el set */
}

/* Pausa al pasar el mouse */
.logo-marquee:hover .marquee-track {
    animation-play-state: paused;
}

/* Accesibilidad: respeta reduced motion */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}
#features{
    background: #b6e8ff;
}

/* Botones sociales reutilizables (ya los usamos en footer) */
.btn-social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e6eef6;
    background: #f8fbff;
    color: #0b2440;
    display: grid;
    place-items: center;
    transition: transform .2s, box-shadow .2s;
}

.btn-social:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 24, 40, .12);
}

/* Mejora inputs en dark nav-context/light content */
.form-control.is-invalid {
    box-shadow: none;
}

/* ===== Subhero (mini banner) ===== */
.subhero {
    min-height: 35vh;
        display: grid;
        align-items: center;
        position: relative;
        margin-top: calc(-1 * var(--navH));
        /* sube la imagen debajo del nav */
        padding-top: calc(var(--navH) + 8px);
}

@media (max-width: 576px) {
    .subhero {
        min-height: 28vh;
    }
}

/* Fondo con parallax (una sola imagen) */
.parallax-bg {
    position: absolute;
        inset: 0;
        background: center/cover no-repeat;
        will-change: transform;
        transform: translate3d(0, 0, 0);
        z-index: 1;
        filter: contrast(1) brightness(.9);
}

/* Texto encima */
.subhero .container {
    position: relative;
    z-index: 2;
}

/* 💧 En páginas internas: oscurecer el fondo para mejor contraste */
.is-internal .subhero .parallax-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom,
            rgba(11, 36, 64, .65) 0%,
            rgba(11, 36, 64, .35) 55%,
            rgba(11, 36, 64, 0) 100%);
    pointer-events: none;
}

/* ===== Contact makeover ===== */
.contact-wrap {
    position: relative;
}

.bg-soft-brand {
    background: rgba(26, 166, 255, .15);
    color: #0b2440;
}

/* blobs decorativos */
.contact-wrap .blob {
    position: absolute;
    border-radius: 999px;
    filter: blur(40px);
    opacity: .45;
    pointer-events: none;
}

.contact-wrap .blob.b1 {
    width: 280px;
    height: 280px;
    top: -40px;
    left: -60px;
    background: radial-gradient(closest-side, #b6e8ff, transparent);
}

.contact-wrap .blob.b2 {
    width: 260px;
    height: 260px;
    bottom: -40px;
    right: -40px;
    background: radial-gradient(closest-side, #e0f3ff, transparent);
}

/* cards con borde degradado sutil */
.card-neo {
    border-radius: 22px;
    border: 1px solid #e8eef6;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .08);
    position: relative;
    background: #fff;
}

.card-neo::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    z-index: -1;
    background: linear-gradient(135deg, rgba(26, 166, 255, .25), rgba(98, 102, 255, .20));
    filter: blur(6px);
}

.card-neo-light {
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e6eef6;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .06);
}

/* chips */
.chip {
    font-size: .75rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: #eef7ff;
    color: #0b2440;
    border: 1px solid #d9ecff;
}

/* inputs con icono + floating label */
.input-icon-group {
    position: relative;
}

.input-icon-group i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #5b708a;
    pointer-events: none;
}

.input-icon-group .form-control {
    padding-left: 2.25rem;
}

.form-floating>.form-control {
    border-radius: .9rem;
}

.form-floating>label {
    color: #7b8aa1;
}

/* botones */
.btn-gradient {
    background: linear-gradient(135deg, var(--brand) 0%, #605dff 100%);
    color: #fff;
    border: 0;
    border-radius: .9rem;
    box-shadow: 0 14px 28px rgba(26, 166, 255, .25);
}

.btn-gradient:hover {
    filter: brightness(.97);
    color: #fff;
}

.btn-social-alt {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #0b2440;
    border: 1px solid #e6eef6;
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn-social-alt:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, .12);
}

/* mapa */
.map-card {
    border: 1px solid #e6eef6;
}

/* pequeños ajustes */
.lead {
    line-height: 1.6;
}
 
/* ===== Sticky footer ===== */
html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    /* el contenido ocupa el espacio disponible */
}

.site-footer {
    flex-shrink: 0;
    /* evita que el footer se comprima */
}

/* ===== Error Pages ===== */
.error-page {
    min-height: calc(100vh - var(--navH) - 220px);
    padding: 5rem 1rem 4rem;
    position: relative;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    overflow: hidden;
}

.error-graphic {
    position: relative;
}

.error-circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--brand-2) 0%, var(--brand) 90%);
    opacity: .15;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.animate-pop {
    animation: popIn .8s ease both;
}

@keyframes popIn {
    0% {
        transform: scale(.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== Under Construction ===== */
.uc-wrap {
    max-width: 920px;
    margin: 0 auto;
}

/* .uc-card {
    border-radius: 22px;
    border: 1px solid #e8eef6;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .08);
} */

.uc-illu {
    display: grid;
    place-items: center;
}

.uc-float {
    animation: ucFloat 4s ease-in-out infinite;
}

@keyframes ucFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

.uc-progress {
    height: 8px;
    max-width: 420px;
    border-radius: 999px;
    background: #eef5ff;
}

.uc-progress .progress-bar {
    background: linear-gradient(90deg, var(--brand), #605dff);
    border-radius: 999px;
}

/* blobs suaves */
.uc-blob {
    position: absolute;
    border-radius: 999px;
    filter: blur(44px);
    opacity: .45;
    pointer-events: none;
}

.uc-blob.b1 {
    width: 280px;
    height: 280px;
    top: -40px;
    left: -60px;
    background: radial-gradient(closest-side, #b6e8ff, transparent);
}

.uc-blob.b2 {
    width: 240px;
    height: 240px;
    bottom: -60px;
    right: -40px;
    background: radial-gradient(closest-side, #e0f3ff, transparent);
}

/* tema coherente */
.bg-soft-brand {
    background: rgba(26, 166, 255, .15);
    color: #0b2440;
}