*{
                    margin:0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                }

                body{
                    background-color: #1D0059;
                    min-height: 100vh;
                }

                /*Sección buscador */
                .hero {
                    width: 100%;
                    aspect-ratio: 1/1;
                    max-height: 90vh;
                    background-color: #702EFF;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: 2rem;
                    padding: 2rem;
                    color:#F9BDEA;
                    align-items: center;
                    
                }
                .hero h1{
                    font-size: clamp(1.8rem,5vw,3rem);
                    font-family: "Rubik Glitch", system-ui;
                    text-align: center;
                    letter-spacing: 1px;
                    font-style: italic;
                    font-weight: 100;
                }
                /* buscador */
                .search-wrapper{
                    position: relative;
                    width: 100%;
                    max-width: 600px;
                }
                .suggestions{
                    position: absolute;
                    top: calc(100% + 6px);
                    left: 0;
                    width: 100%;
                    background-color: #F9BDEA;
                    border-radius: 15px;
                    box-shadow: 0 8px 24px rgba(29,0,89,.35);
                    list-style: none;
                    overflow: hidden;
                    max-height: 0;
                    opacity: 0;
                    transform: translateY(-6px);
                    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
                    z-index: 10;
                }
                .suggestions.open{
                    max-height: 320px;
                    opacity: 1;
                    transform: translateY(0);
                    overflow-y: auto;
                }
                .suggestions li{
                    padding: 0.85rem 1.5rem;
                    color: #1D0059;
                    font-size: 0.95rem;
                    cursor: pointer;
                    border-bottom: 1px solid rgba(54,14,135,0.12);
                    transition: background-color 0.15s;
                }
                .suggestions li:last-child{
                    border-bottom: none;
                }
                
                .suggestions li:hover, .suggestions li.active{
                    background-color: #d6c6ff;
                }
                .suggestions li mark{
                    background: transparent;
                    color: #3700b0;
                    font-weight: 700;
                }
                .suggestions li .marca{
                    font-size: 0.75rem;
                    color: #702EFF;
                    margin-left: 0.5rem;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }
                .suggestions .no-results{
                    color:#6B5A99;
                    font-style: italic;
                    cursor: default;
                }
                .suggestions .no-results:hover{
                    background: transparent;
                }
.search-box{
    display: flex;
    width:100%;
    max-width: 600px;
    background-color: #EEE6FF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(29, 0,89,0.25);
}
.search-box input{
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    outline: none;
    font-size: 1rem;
    color: #1D0059;
}
.search-box button{
    padding: 0 1.8rem;
    border: none;
    background-color: #360E87;
    color: aliceblue;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
.search-box button:hover{
    background-color: #3700B0;
}
.hero p{
    font-size: 1.2rem;
    color:aliceblue;
    text-align: center;
    font-family: "Leckerli One",cursive;
 }