/* ===================================================
   UNIVERSO DE MAGIA Y AMOR
   Hoja de estilos principal
   =================================================== */

/* ==========================
   GOOGLE FONTS
========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

/* ==========================
   VARIABLES
========================== */

:root{

    --lila-claro:#F5F0FF;
    --lila:#D8B4FE;
    --lila-oscuro:#B388EB;

    --rosa:#FADADD;
    --rosa-fuerte:#F6B8C9;

    --menta:#D7F5E8;

    --blanco:#ffffff;

    --gris:#555;

    --gris-claro:#f8f8f8;

    --sombra:0 10px 30px rgba(0,0,0,.08);

    --transicion:.35s ease;

    --radio:20px;

}

/* ==========================
   RESET
========================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(180deg,
    #ffffff 0%,
    #F5F0FF 35%,
    #FDF7FA 70%,
    #ffffff 100%);

    color:#444;

    overflow-x:hidden;

}

/* ==========================
   TITULOS
========================== */

h1,h2,h3,h4,h5{

    font-family:'Quicksand',sans-serif;

    font-weight:700;

}

a{

    text-decoration:none;

}

img{

    max-width:100%;

}

/* ==========================
   NAVBAR & MENÚ PRINCIPAL
========================== */

.menu-principal {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(15px);
    box-shadow: var(--sombra);
    transition: 0.4s;
}

.logo {
    width: 45px;
    margin-right: 8px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #7a4ea3 !important;
    white-space: nowrap;
}

.navbar-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 2px; 
}

.nav-item {
    display: flex;
    align-items: center;
}

.nav-link {
    font-weight: 600;
    color: #666 !important;
    padding: 8px 8px !important;
    font-size: 0.85rem;
    transition: var(--transicion);
    white-space: nowrap;
}

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

.dropdown-menu {
    border: none;
    border-radius: 15px;
    box-shadow: var(--sombra);
}

.dropdown-item {
    padding: 12px;
}

.dropdown-item:hover {
    background: var(--lila-claro);
}


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

.hero{

    position:relative;

    min-height:100vh;

    background:url("../images/banner-principal.png");

    background-size:cover;

    background-position:left;

    display:flex;

    align-items:center;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(177,120,235,.55),
        rgba(250,218,221,.45)
    );

}

.hero-content{

    position:relative;

    z-index:2;

    color:white;

}

.hero h1{

    font-size:4rem;

    margin-bottom:25px;

}

.hero p{

    font-size:1.3rem;

    line-height:1.8;
  	text-align: center;
    max-width: 900px;

}

.hero-buttons{

    margin-top:40px;

}

/* ==========================
   BOTONES
========================== */

.btn-magia{

    background:linear-gradient(
        45deg,
        var(--lila),
        var(--rosa)
    );

    border:none;

    color:white;

    padding:14px 35px;

    border-radius:50px;

    transition:.4s;

    font-weight:600;

}

.btn-magia:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 25px rgba(182,116,214,.4);

    color:white;

}

.btn-outline-light{

    border-radius:50px;

    padding:14px 35px;

}

/* ==========================
   BIENVENIDA
========================== */

.bienvenida{

    padding:100px 0;

}

.bienvenida h2{

    color:#9b5ec4;

    margin-bottom:30px;

}

.bienvenida p{

    line-height:2;

    font-size:1.1rem;

}

.bienvenida-img{

    max-width:320px;

    animation:flotar 4s infinite;

}

/* ==========================
   TITULOS DE SECCIÓN
========================== */

.titulo-seccion{

    text-align:center;

    margin-bottom:70px;

    color:#9b5ec4;

    position:relative;

}

.titulo-seccion::after{

    content:"";

    width:90px;

    height:4px;

    background:linear-gradient(
        to right,
        var(--rosa),
        var(--lila)
    );

    display:block;

    margin:15px auto;

    border-radius:20px;

}

/* ==========================
   CATEGORÍAS
========================== */

.categorias{

    padding:90px 0;

}

.categoria-card{

    border:none;

    border-radius:25px;

    overflow:hidden;

    box-shadow:var(--sombra);

    transition:.4s;

    background:white;

}

.categoria-card:hover{

    transform:translateY(-12px);

}

.categoria-card img{

    height:260px;

    object-fit:cover;

}

.categoria-card .card-body{

    padding:30px;

    text-align:center;

}

.categoria-card h3{

    color:#9253be;

    margin-bottom:20px;

}

/* ==========================
   PRODUCTOS DESTACADOS
========================== */

.destacados{

    padding:100px 0;

    background:var(--lila-claro);

}

.producto{

    background:white;

    border-radius:25px;

    overflow:hidden;

    text-align:center;

    padding-bottom:25px;

    box-shadow:var(--sombra);

    transition:.35s;

}

.producto:hover{

    transform:scale(1.04);

}

.producto img{

    height:240px;

    object-fit:cover;

}

.producto h4{

    margin:20px 0;

    color:#8f5dc0;

}

/* ===================================================
   PRODUCTOS (continuación)
=================================================== */

.producto p{

    color:#666;

    padding:0 15px;

    font-size:.95rem;

}

.producto .btn{

    margin-top:15px;

}

/* ===================================================
   POR QUÉ ELEGIRNOS
=================================================== */

.porque{

    padding:100px 0;

    text-align:center;

}

.porque h2{

    color:#9b5ec4;

    margin-bottom:60px;

}

.icono{

    background:white;

    padding:40px 20px;

    border-radius:25px;

    box-shadow:var(--sombra);

    transition:.4s;

    height:100%;

}

.icono:hover{

    transform:translateY(-10px);

}

.icono i{

    font-size:2.5rem;

    color:#b388eb;

    margin-bottom:20px;

}

/* ===================================================
   TESTIMONIOS
=================================================== */

.testimonios{

    padding:100px 0;

    background:linear-gradient(135deg,#fff,#f7f0ff);

    text-align:center;

}

.testimonios h2{

    color:#9b5ec4;

    margin-bottom:60px;

}

.testimonio{

    background:white;

    padding:35px 25px;

    border-radius:25px;

    box-shadow:var(--sombra);

    transition:.4s;

}

.testimonio:hover{

    transform:scale(1.05);

}

.testimonio p{

    font-style:italic;

    color:#555;

    margin:15px 0;

}

.testimonio strong{

    color:#8b4fc2;

}

/* ===================================================
   CTA (LLAMADA A LA ACCIÓN)
=================================================== */

.cta{

    padding:120px 0;

    background:linear-gradient(45deg,#d8b4fe,#fadadd);

    color:white;

    text-align:center;

}

.cta h2{

    font-size:2.5rem;

    margin-bottom:20px;

}

.cta p{

    font-size:1.2rem;

    margin-bottom:30px;

}

/* ===================================================
   FOOTER
=================================================== */

.footer{

    background:#2b2b2b;

    color:white;

    padding:80px 0 30px 0;

}

.footer h3,
.footer h4{

    color:#d8b4fe;

    margin-bottom:20px;

}

.footer ul{

    list-style:none;

    padding:0;

}

.footer ul li{

    margin-bottom:10px;

}

.footer ul li a{

    color:#ccc;

    transition:.3s;

}

.footer ul li a:hover{

    color:white;

}

.redes a{

    display:inline-block;

    width:40px;

    height:40px;

    line-height:40px;

    text-align:center;

    border-radius:50%;

    background:#444;

    margin-right:8px;

    color:white;

    transition:.3s;

}

.redes a:hover{

    background:#b388eb;

    transform:translateY(-5px);

}

.copyright{

    text-align:center;

    margin-top:30px;

    color:#aaa;

}

/* ===================================================
   ANIMACIONES
=================================================== */

@keyframes flotar{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ===================================================
   RESPONSIVE
=================================================== */

/* Tablets */
@media(max-width:992px){

    .hero h1{

        font-size:2.8rem;

    }

    .hero{

        text-align:center;
      	background-position: -290px;

    }

    .hero-content{

        margin:auto;

    }

}

/* Móviles */
@media(max-width:576px){

    .hero h1{

        font-size:2.2rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero{

      	background-position: -330px;

    }

    .btn-magia{

        width:100%;

        margin-bottom:10px;

    }

    .categoria-card img{

        height:200px;

    }

    /* ==========================
   ANIMACIONES SCROLL
========================== */

.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:all .6s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================
   BOTÓN ARRIBA
========================== */

.btn-arriba{

    position:fixed;

    bottom:30px;

    right:30px;

    width:50px;

    height:50px;

    border-radius:50%;

    border:none;

    background:linear-gradient(45deg,#d8b4fe,#fadadd);

    color:white;

    font-size:20px;

    display:none;

    cursor:pointer;

    box-shadow:0 10px 20px rgba(0,0,0,0.2);

    z-index:999;
}

.btn-arriba:hover{

    transform:scale(1.1);

}

}