/* ===========================
   Snack Los Tóxicos
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

body{
    background:#111;
    color:#fff;
    font-family:'Segoe UI',Arial,sans-serif;
    overflow-x:hidden;
}

/* Barra de navegación */

.glass{
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,20,147,.3);
}

.navbar-brand{
    font-size:1.5rem;
    color:#ff4db8!important;
    text-shadow:0 0 10px #ff1493;
}

.nav-link{
    color:#fff!important;
    transition:.3s;
}

.nav-link:hover{
    color:#ff4db8!important;
}

/* HERO */

.hero{
    width:100%;
    height:100vh;

    background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.75)),
    url("../img/cajuela.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle,
    rgba(255,20,147,.20),
    transparent 70%);

}

.content{

    position:relative;

    z-index:10;

    text-align:center;

}

.content h1{

    font-size:70px;

    color:#ff4db8;

    font-weight:900;

    text-shadow:

    0 0 15px #ff1493,

    0 0 35px #ff1493,

    0 0 60px #ff1493;

    animation:brillo 2s infinite alternate;

}

.content p{

    font-size:24px;

    margin-top:20px;

    color:#fff;

}

/* Botones */

.btn-pink{

    background:#ff1493;

    color:white;

    border-radius:40px;

    padding:15px 35px;

    font-size:20px;

    transition:.35s;

    box-shadow:0 0 20px #ff1493;

}

.btn-pink:hover{

    transform:scale(1.08);

    background:#ff4db8;

    box-shadow:0 0 35px #ff1493;

}

/* Nosotros */

#nosotros{

    padding:100px 0;

}

.placeholder-box{

    height:380px;

    border-radius:25px;

    border:3px solid #ff1493;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    box-shadow:0 0 25px rgba(255,20,147,.5);

}

.placeholder-box img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* CTA */

.cta{

    padding:100px 20px;

    text-align:center;

    background:#191919;

}

.cta h2{

    color:#ff4db8;

    font-size:48px;

}

.cta p{

    font-size:22px;

}

/* Footer */

footer{

    background:#000;

    padding:40px;

    text-align:center;

    border-top:2px solid #ff1493;

}

/* Animación */

@keyframes brillo{

    from{

        text-shadow:

        0 0 10px #ff1493,

        0 0 25px #ff1493;

    }

    to{

        text-shadow:

        0 0 20px #ff1493,

        0 0 50px #ff1493,

        0 0 90px #ff1493;

    }

}

/* Celular */

@media(max-width:768px){

.content h1{

font-size:45px;

}

.content p{

font-size:18px;

}

.btn-pink{

font-size:18px;

padding:12px 25px;

}

.cta h2{

font-size:32px;

}

}

/* ====== Pantallas grandes ====== */
@media (min-width:992px){

    .placeholder-box{
        height:500px;
    }

    .placeholder-box img{
        width:auto;
        height:100%;
        max-width:100%;
        object-fit:contain;
    }

}