:root{
    --rosa:#E83E8C;
    --morado:#d800ff;
    --white:#fff;
    --grisblack:#212529;
    --grismed:#6C757D;
    --griswhite:#F5F5F5;
    --black:#000;
    --hover-li:#F1F1F1;
    --radius-li:18px;
    --bg-search:#F1F1F1;
    --line-gris:#E8E5E7;
    --gris-pink:#F7F2F6;
    --gris-pink-hover:#E9DCE8;
    --hidden:#d6c5cf;
    --gray-btn:#f0f0f0;
    --gray-search:#baa2b3;
}
html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}
*,h1,h2,h3,h4,h5,h6,p,a,li,ul,ol,div,span{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body{
    background-color: var(--white);
}
/* nav */
.pc__nav{
    padding: 0 15px;
    padding-top: 15px;
    border-bottom: 2px solid var(--griswhite);
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--white);
}
.pc__nav a{
    text-decoration: none;
    color: var(--black);
}
/* contenedor */
.contenedor__principal__nav__pc{
    display: flex;
    justify-content: space-between;
}
/* left nav*/
.nav__pc__left{
    display: flex;
    gap: 2rem;
    justify-content: center;
    padding-left: 2rem;
}
.nav__pc__list{
    display: flex;
    list-style: none;
    gap: 1.5rem;
}
.nav__pc__list li{
    padding: 6px 10px;
    border-radius: var(--radius-li);
    transition: all .3s ease;
}
.nav__pc__list li:hover{
    background-color: var(--hover-li);
}
.nav__pc__list li a{
    font-size: 1rem;
}
.nombre__marca h4{
    font-weight: 500;
    position: relative;
    top: 6px;
    font-size: 1.3rem;
}
/* right nav */
.nav__pc__right{
    margin-right: 2rem;
}
.search__btn__pc{
    all: unset;
    background-color: var(--bg-search);
    padding: 8px 90px 8px 10px;
    height: 25px;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.contain_search__btn{
    display: flex;
    gap: 10px;
    height: 30px;
}
.icon__search{
    height: 30px;
    color: var(--gray-search);
}
.text__btn__search{
    color: var(--gray-search);
}
.search__link{
    text-decoration: none;
}
/* footer */
.footer__main{
    display: flex;
    justify-content: center;
    padding: 20px;
}
.content__all__footer{
    margin-top:40px ;
}
.content__footer__sections__nav{
    display: flex;
    justify-content: center;
}
.nav__footer__ul{
    list-style: none;
    display: flex;
    margin-right: 100px;
    gap: 6vw;
    padding: 0;
}
.nav__footer__ul a{
    text-decoration: none;
    color: var(--grismed);
    transition: all .3s ease;
    font-size: 1rem;
}
.nav__footer__ul a:hover,.footer__ico:hover{
    color: var(--grisblack);
}
.redes__content{
    display: flex;
    justify-content: center;
    padding: 5px;
}
.footer__ico{
    font-size: 1.3rem;
    color: var(--grismed);
    margin: 7px 10px;
    transition: all .3s ease;
}
.reservado__footer, .reservado__footer a{
    text-align: center;
    color: var(--grismed);
    margin-top: 30px;
    text-decoration: none;
}
/* responsive menu */
.nav__mobil__right{
    position: relative;
}
.mobil__nav{
    border-bottom: 2px solid var(--griswhite);
    padding: 10px 30px;
    padding-top: 15px;
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--white);
    display: none;
}
.nav__mobil__left a{
    font-size: 1.3rem;
    text-decoration: none;
    color: var(--black);
}
.contenedor__principal__nav__mobil{
    display: flex;
    justify-content: space-between;
}
.menu__open,.menu__close{
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.icon__menu__open,.icon__menu__close{
    font-size: 1.5rem;
    color: var(--black);
}
.close__menu__section{
    display: flex;
    justify-content: space-between;
}
.secciones__menu__mobil{
    list-style: none;
    margin-top: 20px;
}
.secciones__menu__mobil a{
    text-decoration: none;
    color: var(--black);
    font-size: 1.2rem;
    font-weight: 500
}
.secciones__menu__mobil li{
    padding: 20px 0;
    border-bottom: 1px solid var(--griswhite);
    width: 100%;
}
.icon__menu__mobil__navegacion{
    font-size: 1rem;
    margin-right: 10px;
    position: relative;
    top: -2px;
}
.search__mobil{
    margin-top: 20px;
}
.menu__sobresaliente{
    background-color: #fdfbfb;
    border-left: 1px solid var(--grismed);
    padding: 20px;
    height: 100vh;
    overflow-y: auto;
    border-radius: 10px 0 0 10px;
    position: absolute;
    right: -30px;
    top: -13px;
    transition: all .5s ease;
}
.translate__100{
    transform: translateY(-200%);
}
.translate__0{
    transform: translateY(0);
}
/* boton que va hacia arriba */
.btn__to__top{
    all: unset;
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--rosa);
    color: white;
    padding: 12px 15px;
    border-radius: 50%;
    border: none;
    font-size: 1.2rem;
    display: none;
    cursor: pointer;
    z-index: 1000;
}