/* ==========================================
   HERO
========================================== */

.hero{

    max-width:1400px;

    margin:0 auto;

    min-height:90vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:120px;

    padding:80px 50px;

}

/* ==========================================
   HERO LEFT
========================================== */

.hero-left{

    flex:1;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:18px 30px;

    border-radius:999px;

    background:rgba(139,92,246,.12);

    color:#B794F4;

    border:1px solid rgba(139,92,246,.35);

    margin-bottom:35px;

    font-weight:600;

}

.hero-left h1{

    font-size:82px;

    line-height:1.0;

    letter-spacing:-2px;

    margin-bottom:25px;

    font-weight:800;

}

.hero-left h1 span{

    color:var(--primary);

}

.hero-left p{

    max-width:560px;

    font-size:20px;

    color:var(--text-secondary);

    line-height:1.8;

}

/* ==========================================
   BUTTONS
========================================== */

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

/* ==========================================
   HERO RIGHT
========================================== */

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.hero-right::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(139,92,246,.35),

        rgba(139,92,246,.15),

        transparent 70%

    );

    animation:pulseGlow 6s ease-in-out infinite;

}

.hero-right img{

    position:relative;

    width:100%;
    
    max-width:650px;

    transform:translateX(30px);

    z-index:2;

    transition:.4s ease;

    animation:float 5s ease-in-out infinite;

    filter:drop-shadow(0 0 40px rgba(139,92,246,.45));

}

.hero-right img:hover{

    transform:scale(1.03);

}

/* Fondo global exclusivo de la portada */

body.landing-page {
    min-height: 100vh;

    background:
        linear-gradient(
            90deg,
            rgba(7, 6, 13, .48) 0%,
            rgba(7, 6, 13, .18) 55%,
            rgba(7, 6, 13, .38) 100%
        ),
        url("/static/img/loobito-hero-background.png")
        center top / cover fixed no-repeat,
        #09090b;
}

/* Mascota adulta: integrada en el fondo y detrás de los contadores */
@media (min-width: 769px) {

    body.landing-page .hero {
        position: relative;
        min-height: 700px;
        overflow: visible;
    }

    body.landing-page .hero-left {
        position: relative;
        z-index: 2;
        max-width: 620px;
    }

    body.landing-page .hero-right {
        position: absolute;
        z-index: 1;
        right: -5%;
        bottom: -450px;
        width: 900px;
        pointer-events: none;
    }

    body.landing-page .hero-right img {
        display: block;
        width: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        transform: none;
        filter: drop-shadow(0 0 34px rgba(139, 92, 246, .55));
    }

    /* Las tarjetas quedan delante y “tapan” la parte baja del lobo */
    body.landing-page .stats {
        position: relative;
        z-index: 3;
    }

}