/* =========================================================================
   Landing institucional do Delfine — ajustes de marca e animações.
   Complementa o tema Velzon (não substitui). Zero cores fixas de texto de
   corpo: usamos variáveis do tema para respeitar o dark mode.
   ========================================================================= */

/* ---------- Anti-overflow (mobile): impede scroll horizontal ---------- */
html,
body.landing-body {
    max-width: 100%;
    overflow-x: hidden;
}

.layout-wrapper.landing {
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
}

/* ---------- Navbar: largura sempre = viewport ---------- */
.navbar-landing.fixed-top {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
}

.navbar-landing .navbar-brand img {
    height: 26px;
    width: auto;
    max-width: 160px;
}

.navbar-landing .navbar-toggler {
    border: 0;
    box-shadow: none;
    padding: 0.25rem 0.4rem;
}

/* Desktop: menu centralizado e botões à direita (padrão Velzon) */
@media (min-width: 992px) {
    .navbar-landing > .container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
    }

    .navbar-landing .navbar-brand {
        max-width: none;
        margin-right: 0;
        flex-shrink: 0;
    }

    .navbar-landing .navbar-collapse {
        display: flex !important;
        flex-grow: 1;
        flex-basis: auto;
        align-items: center;
    }

    .navbar-landing .navbar-nav {
        margin-left: auto;
        margin-right: auto;
    }

    .navbar-landing .navbar-collapse > .d-flex {
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
}

/*
 * Troca de logo: clara sobre o hero, escura quando fixa.
 * Seletor mais específico que `.navbar-brand img` — evita as duas
 * logos aparecerem juntas (display:block sobrescrevia display:none).
 */
.navbar-landing .navbar-brand .logo-hero {
    display: block;
}

.navbar-landing .navbar-brand .logo-sticky {
    display: none;
}

.navbar-landing.is-sticky .navbar-brand .logo-hero {
    display: none;
}

.navbar-landing.is-sticky .navbar-brand .logo-sticky {
    display: block;
}

/* ---------- Navbar sobre o hero (gradiente escuro) — desktop ---------- */
@media (min-width: 992px) {
    .navbar-landing:not(.is-sticky) .nav-link,
    .navbar-landing:not(.is-sticky) .navbar-brand,
    .navbar-landing:not(.is-sticky) .btn-link,
    .navbar-landing:not(.is-sticky) .navbar-toggler {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .navbar-landing:not(.is-sticky) .nav-link.active,
    .navbar-landing:not(.is-sticky) .nav-link:hover {
        color: #fff !important;
    }
}

/* Quando fixa (rolagem), volta ao visual claro padrão do Velzon */
.navbar-landing.is-sticky {
    background-color: var(--vz-secondary-bg);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

.navbar-landing.is-sticky .nav-link,
.navbar-landing.is-sticky .navbar-brand,
.navbar-landing.is-sticky .btn-link,
.navbar-landing.is-sticky .navbar-toggler {
    color: var(--vz-body-color) !important;
}

.navbar-landing.is-sticky .nav-link.active,
.navbar-landing.is-sticky .nav-link:hover {
    color: var(--vz-primary) !important;
}

/*
 * Smartphone / tablet (≤991px): o Velzon força fundo claro na navbar.
 * Sempre usar logo escura + textos escuros — evita “topo branco” com logo
 * clara invisível sobre fundo claro.
 */
@media (max-width: 991.98px) {
    .navbar-landing {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .navbar-landing > .container {
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding-left: 12px;
        padding-right: 12px;
    }

    .navbar-landing .navbar-brand {
        max-width: calc(100% - 3rem);
        min-width: 0;
        margin-right: auto;
    }

    .navbar-landing .navbar-brand img {
        max-width: min(140px, 55vw);
    }

    .navbar-landing .navbar-brand .logo-hero {
        display: none !important;
    }

    .navbar-landing .navbar-brand .logo-sticky {
        display: block !important;
    }

    .navbar-landing .navbar-toggler,
    .navbar-landing .nav-link,
    .navbar-landing .btn-link {
        color: var(--vz-body-color) !important;
    }

    .navbar-landing .nav-link.active,
    .navbar-landing .nav-link:hover {
        color: var(--vz-primary) !important;
    }

    .navbar-landing .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
        background-color: var(--vz-secondary-bg);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        margin-top: 0.5rem;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

    /* Botões do menu mobile em coluna, sem estourar a largura */
    .navbar-landing .navbar-collapse .d-flex {
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
        margin-top: 0.75rem;
        gap: 0.5rem;
    }

    .navbar-landing .navbar-collapse .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Hero com gradiente animado + partículas ---------- */
/*
 * O Velzon aplica .hero-section { background-color: light }.
 * Precisamos anular isso para o gradiente não virar “faixa branca”.
 */
.hero-section.delfine-hero {
    position: relative;
    overflow: hidden;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #2c3e73 0%, #405189 45%, #0ab39c 120%);
    background-size: 200% 200%;
    animation: delfineGradiente 16s ease infinite;
}

@keyframes delfineGradiente {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#particles-hero {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    max-width: 100%;
    /* Canvas recebe o mouse para o efeito grab (linhas seguem o cursor) */
    pointer-events: auto;
}

#particles-hero canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

.delfine-hero .bg-overlay-pattern {
    opacity: 0.08;
    z-index: 0;
    pointer-events: none;
}

.delfine-hero .container {
    position: relative;
    z-index: 1;
    max-width: 100%;
    /* Deixa o mouse “passar” até as partículas; só CTAs/links capturam clique */
    pointer-events: none;
}

.delfine-hero .container a,
.delfine-hero .container button,
.delfine-hero .container .btn,
.delfine-hero .container input,
.delfine-hero .container .carousel {
    pointer-events: auto;
}

/* Prints do sistema no hero — tamanho controlado (antes estouravam a coluna) */
.demo-carousel {
    overflow: hidden;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.demo-carousel .carousel-inner {
    max-width: 100%;
}

.demo-carousel .carousel-item img {
    width: 100%;
    height: auto;
    display: block;
}

.demo-carousel .demo-img-patten-top,
.demo-carousel .demo-img-patten-bottom {
    max-width: 180px;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .demo-carousel {
        max-width: 100%;
    }
}

/* Texto do hero em tom claro sobre o gradiente */
.delfine-hero h1,
.delfine-hero .lead,
.delfine-hero .hero-lead,
.delfine-hero p {
    color: rgba(255, 255, 255, 0.92) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.delfine-hero .lead strong,
.delfine-hero .hero-lead strong,
.delfine-hero p strong {
    color: #fff !important;
    font-weight: 700;
}

.delfine-hero .hero-slogan {
    background-color: #fff !important;
    color: #087f5b !important;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.delfine-hero .hero-slogan i {
    color: #0ab39c;
}

/* Onda de transição para a próxima seção acompanha o fundo do tema */
.delfine-hero .hero-shape-svg {
    overflow: hidden;
    max-width: 100%;
    pointer-events: none;
}

.delfine-hero .hero-shape-svg svg path {
    fill: var(--vz-body-bg);
}

/* Espaço sob a navbar fixa + tipografia legível no mobile */
@media (max-width: 991.98px) {
    .delfine-hero {
        padding-top: 4.5rem;
    }

    .delfine-hero h1.display-4 {
        font-size: calc(1.45rem + 1.2vw);
    }

    .delfine-hero .lead {
        font-size: 1rem;
    }

    .delfine-hero .btn-lg {
        padding: 0.55rem 1rem;
        font-size: 0.95rem;
    }

    #particles-hero {
        opacity: 0.45;
    }

    .section .container,
    .custom-footer .container {
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 575.98px) {
    .delfine-hero .d-flex.gap-2 {
        flex-direction: column;
        align-items: stretch !important;
    }

    .delfine-hero .d-flex.gap-2 .btn {
        width: 100%;
    }

    .demo-carousel .carousel-inner {
        padding: 0.35rem !important;
    }
}

/* ---------- Cards de módulos ---------- */
#modulos .delfine-lista li span {
    font-size: 0.9rem;
}

.card-animate {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* ---------- Efeito de ícone ---------- */
.icon-effect .avatar-title {
    transition: transform 0.3s ease;
}

.d-flex:hover > .flex-shrink-0 .icon-effect .avatar-title {
    transform: translateY(-4px);
}

/* ---------- Back to top ---------- */
.landing-back-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: none;
    z-index: 1030;
}

/* ---------- Respeita prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-section.delfine-hero {
        animation: none;
    }
    .card-animate,
    .icon-effect .avatar-title {
        transition: none;
    }
}