body{
    width: 100%;
    height: 100%;
    display: flex;
    background: linear-gradient(to right, #fffcf6, #fcecee);
    margin: 0;
    align-items: center;
    justify-content: center;
    /*font-family:'Courier New', Courier, monospace !important;*/
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}


.Endless{
  height: auto;
  background-color: #33031f;
  width: 100%;
  display: flex;
  align-items:first baseline;
  justify-content: center;
  gap: 30vh;
  padding-bottom: 20vh;
}

.Endless .colums{
  display: flex;
  flex-direction: column;
  margin-top: 10vh;
}

.Endless .colums h3{
  color: #f0d3ff;
  font-weight: 300;
}

.Endless .colums a{
  color: #ffffff;
  text-decoration: none;
  margin-top: 3vh;
}

.Endless .colums a img{
    filter: invert(1);
}

.Endless .colums a:hover{
  color: #932be9;
}


.colores-circulos {
  display: flex;
  gap: 6px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.circulo-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #272625;
  display: inline-block;
}




#userSection{
    display: flex;
    align-items: center;
    justify-content: right;
    width: 350px;
}

#userSection .icono{
    margin-top: 10%;
    margin-right: 15%;
}

.AlquilarBTN {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    gap: 5px;
    border: #000;
    font-size: 20px;
    min-width: 200px;
    min-height: 50px;
    margin-bottom: 15%;
}

.AlquilarBTN:hover {
    background-color: #444;
    cursor: pointer;
}



.ComprarBTN {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    gap: 5px;
    border: #000;
    font-size: 20px;
    min-width: 200px;
    min-height: 50px;
    margin-bottom: 15%;
    margin-top: 5%;
}

.ComprarBTN:hover {
    background-color: #444;
    cursor: pointer;
}

i{
    color: white; font-size: 24px; cursor: pointer;
}

i:hover{
    color: #753444;
}
/* Contenedor del header */
.navbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15px 20px;
  position: relative;
  z-index: 10;
}

/* Icono hamburguesa */
.menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 35px;
  height: 25px;
  cursor: pointer;
  margin-right: auto; /* Lo pone a la izquierda del logo */
  margin-left: -40px;
}

.bar {
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: 0.3s;
  
}

/* Logo */
.logo {
  height: 40px;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: -220px;
  width: 200px;
  height: 100vh; /* asegurar altura de pantalla */
  background-color: #9c335b;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow-y: auto; /* <--- esto hace scroll interno */
}


.sidebar a {
  color: white;
  padding: 15px 20px;
  text-decoration: none;
  font-size: 16px !important;
}

.sidebar a:hover {
  background-color: #ffe0fa;
  color: #9c335b;
}

/* Estado abierto */
.sidebar.open {
  left: 0;
}

.sideTop{
    width: 100.3%;
    background-color: #ffffff;
    margin-top: 0;
    height: 90px;
    margin-bottom: 35px;
}

.sideTop img{
    margin: 35px 5px 0px 10px;
}


/* Transición de icono a X */
.menu-icon.open .bar:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}
.menu-icon.open .bar:nth-child(2) {
  opacity: 0;
}
.menu-icon.open .bar:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* Responsive opcional */
@media (max-width: 600px) {
  .logo {
    height: 30px;
  }
  .sidebar {
    max-width: 100%;
  }
}


nav{
    display: flex;
    background-color: #e6a3ac;
    color: #ffffff;
    font-size: 18px;
    width: 100%;
    justify-content:space-around;
    align-items: center;
    z-index: 1000;
    gap: 350px;
    height: 90px;
}



nav p{
    color: #ffffff !important;
    font-size: 20px !important;
}

nav a{
    color: #fff !important; 
    font-size: 20px !important;
    margin-bottom: 10%;
    font-weight: 300 !important;
}

nav a:hover{
    color: #9c127e !important;
}

.categorias{
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
}

.links{
    display: flex;
    gap: 40px;
}

.categorias a{
    cursor: pointer;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}

.categorias a:hover{
    color: #753444 !important;
}
.banner {
  background: url("Elementos/Modelo/Banner10.png") center center no-repeat;
  background-size: cover;
  height: 325px;
  width: 100%;
  position: relative;
  overflow: hidden;
  animation: moverFondo 20s ease-in-out infinite alternate;
}

/* Movimiento sutil del fondo */
@keyframes moverFondo {
  0% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 53% 47%;
  }
}

/* Capa de luz animada */
.banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 192, 255, 0) 0%,
    rgba(255, 160, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 180, 255, 0.1) 70%,
    rgba(255, 200, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: deslizarLuz 9s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}


/* Movimiento de izquierda a derecha */
@keyframes deslizarLuz {
  0% {
    left: -100%;
  }
  80% {
    left: 125%;
  }
  100% {
    left: 255%;
  }
}





.bannerC{
    background: url(Elementos/Modelo/Banner1.png);
    background-size: cover;
    background-position: center;
    height: 300px;
    width: 100%;
    color: #ddd;
}

.scretch{
    width: 100%;
    display: flex;
    justify-content: right !important;
    align-items: flex-end;
    gap: 20px;
    margin-top: 3%;
    margin-right: 260px;
}

.scretch input{
    border-radius: 10px;
}

.scretch img{
    transition: 0.3s;
}

.scretch img:hover{
    transform: scale(1.05);
}

.ContactoNav{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ContactoNav2{
    display: flex;
    align-items: center;
    justify-content: center;
}

.ContactoNav img{
    height: 50px;
    width: 50px;
}

.ContactoNav2 a{
    padding-left: 10px;
    padding-right: 10px;
}

.nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-size: 100%;
    
}

.navegacion{
    width: 100%;
    height: 25px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    font-size: 20px;
    background: linear-gradient(to right, #000000, #111111);
    padding: 20px;
    box-shadow: 0 5px 20px rgba(28, 28, 29, 0.5);
}


.navegacion a{
    text-decoration: none;
    font-weight: 400;
    color: rgb(39, 42, 44);
    padding: 10px;
    color: #ffffff;
    background-color: #181818;
    border-radius: 10px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

.navegacion a:hover{
    color: #753444;
    background-color: #111111;
}

.Card{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    margin-top: 25px;
    width: 350px;
    height: auto;
    cursor: pointer;
    transition: 0.3s;
    justify-content: left;
    text-align: left;
}



.Card:hover{
    transform: scale(1.05);
}

.orden {
    display: flex;
    flex-direction: column;
    align-items: center; /* Esto alinea los elementos hijos a la izquierda */
    width: 100%; /* Opcional, pero ayuda a ocupar todo el ancho */
    
}


.Card img{
    width: 350px;
    height: 400px;
    box-shadow: 0 3px 30px rgba(194, 143, 84, 0.108);
    margin-bottom: -7px;
    object-fit: cover;
    margin-top: -15px;
    transition: 0.5s;

}

.Card h1{
    font-size: 22px !important;
    font-weight: 800 !important;
    text-decoration: none; /* Elimina el subrayado del enlace */
    text-shadow: 0 0px 10px rgba(218, 218, 218, 0.142);;
    margin-left: -5px;
    margin-right: 5px;
    z-index: 999;
    max-width: 90%;
    margin-top: 5vh;

    border-bottom: 2px solid #fc7d8e;

}

.Card .informacion{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0px;
    text-decoration: none;
    padding: 0 2.5vh 0 2.5vh;
}

.Card .informacion h2{
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #181818;
}

.Card .informacion h5{
    font-size: 20px !important;
    font-weight: 400 !important;
    
    color: #ff2d37;
    margin-top: 3vh;
}

.Card .informacion h6{
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #222222;
    border: 3px #fc7d8e solid;
    margin-top: 0;
    padding: 10px;
}

.Card .informacion .Talle{
    display: none;
    align-items: center;
}

.Card .informacion h3{
    padding-left: 2.5px;
    padding-right: 3px;
    border-radius: 100%;
    font-size: 18px !important;
    margin-left: 5px;
    font-weight: 700;
    color: #f39faa;
}

.Card .informacion .Medidas{
    font-size: 24px !important;
    margin-top: -10px;
    font-weight: 600;
}

.Card .informacion .Medidas2{
    margin-top: -10px;
    font-size: 28px;
    color: #161616;
    font-weight: 700;
}

.container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px;
    margin-top: 50px;
}

.Cabezudos{
    margin-top: -30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.Cabezudos h1{
    font-size: 24px;
    font-weight: 300 !important;
}

.Card {
    text-align: center; /* Asegura que el contenido dentro de la tarjeta esté centrado */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Card a {
    margin-top: 15px;
    text-decoration: none; /* Elimina el subrayado del enlace */
    color: inherit; /* Mantiene el color del texto */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* Asegurar que las categorías se apilen una debajo de la otra */
#productosContainer {
    display: flex;
    flex-direction: column; /* Apila las categorías en columnas */
    gap: 40px; /* Espaciado entre categorías */
}

/* Cada categoría se mostrará en bloque */
.categoria {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.categoria h2{
    font-size: 25px;
    font-weight: 200;
}

/* Mantener la grilla de 4 productos por fila */
.categoriaContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columnas por fila */
    gap: 120px;
    justify-items: center;
}


/* Ajuste responsivo */
@media (max-width: 1024px) {
    .categoriaContainer {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas por fila */
    }
}

@media (max-width: 768px) {
    .categoriaContainer {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas por fila */
    }
}

@media (max-width: 480px) {
    .categoriaContainer {
        grid-template-columns: repeat(1, 1fr); /* 1 columna por fila */
    }
}

#preloader {
    position: fixed;
    width: 100%;
    height: 150%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ddd;
    border-top: 5px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#productosContainer {
    display: none; /* Se oculta hasta que los producto carguen */
}

#welcomeContainer {
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center; /* Centra los elementos */
}

#welcomeContainer p{
    font-size: 25px;
    font-weight: 600;
    color: #ffffff;
}


#logoutButton {
    font-size: 25px;
    color: white;
    text-decoration: none;
    transition: 0.3s;
    margin-top: -20px;
}

#logoutButton:hover {
    color: #3a3a3a;
}

.QTitulo h1{
    color: #000000;
    font-size: 48px;
    margin-top: 100px;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-style: oblique !important;
}

.QTexto {
    color: #0f0f0f;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 200 !important;
    text-align: justify;
    font-style: oblique !important;
    font-size: 22px;
    margin-top: 20px;
    width: 75%;
    margin-bottom: 60px;
}

#Contacto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
    margin-top: 25px;
    text-decoration: none !important; /* Elimina el subrayado del enlace */
    font-weight: lighter !important;
    color: #ffffff;
}

#Contacto .WhatsApp a{
    font-size: 10px;
    font-weight: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(28, 28, 29, 0.25);
    color: #000000;
    background-color: #ffffff;
    padding: 30px;
}

#Contacto .MensajeD a{
    font-size: 10px;
    font-weight: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(28, 28, 29, 0.25);
    color: #000000;
    background-color: #ffffff;
    padding: 30px;
}

#Contacto .Instagram a{
    font-size: 10px;
    font-weight: 100 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(28, 28, 29, 0.25);
    color: #000000;
    background-color: #ffffff;
    padding: 30px;
}

#Contacto .Instagram a:hover {
    transform:scale(1.1);
}

#Contacto .WhatsApp a:hover {
    transform:scale(1.1);
}
#Contacto .MensajeD a:hover {
    transform:scale(1.1);
}

.ContactoC {
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-top: 70px;
    margin-bottom: 70px;
    font-weight: lighter !important;
    color: #fff;
    
}

.PieDePagina{
    margin-top: 10%;
    width: 100%;
    background-color: #5f273e;
}

.ver-mas-btn {
    
    color: white;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 100 !important;
    background-color: #141414;
    padding: 10px;
    border-radius: 10px;
    font-size: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border: none;
    cursor: pointer;
    margin-top: 70px;
    margin-bottom: 40px;
}

.ver-mas-btn:hover {
    color: #fffadc;
    background-color: #292929;
}

.envio-banner {
  position: relative;
  width: 100%;
  height: 6.5vh;
  overflow: hidden;
  background-color: #000000;
  display: flex;
  align-items: center;
  box-shadow: -20px 0 28px rgba(255, 245, 189, 0.9);
  z-index: 10;
  color: #ffffff;
  margin-bottom: 10vh;
}

.envio-banner h2{
  font-size: 4vh;
  background-color: #000000;
  font-weight: 300;
  z-index: 100;
  padding-left: 5vh;
  padding-right: 3vh;
  border-right: 2px solid white;
}

.envio-movil {
  display: flex;
  align-items: center;
  position: absolute;
  white-space: nowrap;
  animation: moverCamion 20s linear infinite;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffffff;
  gap: 10px;
  font-weight: 100 !important;
}

.envio-movil img {
  height: 25px;
}

@keyframes moverCamion {
  0% {
    right: 90%;
  }
  100% {
    right: -100%;
  }
}



@media (max-width: 1568px) {
    body {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    nav {
        gap: 5px;
        height: 80px;
        padding: 0px 0;
        align-items: center !important;
        justify-content: left;
    }

    nav img{
        width: 40%;
    }

    nav p{
        margin-right: 15px !important;
        font-size: 14px !important;
    }

    nav a{
        margin-right: 15px !important;
        margin-top: 1px !important;
        font-size: 14px !important;
    }
    .categorias {
        gap: 0px;
        font-size: 14px;
        width: 90%;
    }

    .categorias .img2{
        width: 90px;
        margin-left: -15px;
    }

    .categorias .img1{
        display: none;
    }

    #welcomeMessage{
        margin-bottom: 0;
    }

    i{
        margin-top: 45%;
    }

    .link{
        display: flex;
    }

    .navegacion {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

      .Endless{
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 0vh;
  }

  .Endless .colums{
    margin-left: 5vh;
  }

  .label{
    margin-left: 3vh;
    margin-right: 3vh;
    font-size: 16px;
    display: flex;
    align-items: first baseline;
    gap: 5px;
  }

}

@media (max-width: 768px) {
    .links {
      display: none; /* Ocultamos los enlaces */
    }
  }

@media (max-width: 768px) {
    .Card {
        width: 90%;
        max-height: none;
        text-align: left;
    }

    .Card h1{
        display: flex;
        justify-content: left;
        font-size: 18px !important;
        max-width: 90%;
    }

    .Card img {
        width: 100%;
        height: auto;
    }

    .Card .informacion h5{
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 2vh;
    color: #ff2d37;
}

.Card .informacion h6{
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #222222;
    border: 3px #fc7d8e solid;
    margin-top: 0;
    padding: 7px;
}
}


@media (max-width: 768px) {
    .Cabezudos{
        padding-left: 30px;
        padding-right: 30px;
    }
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
}

@media (max-width: 768px) {
    .scretch {
        align-items: center;
        margin-right: 8%;
        gap: 10px;
    }

    .scretch img{
        width: 20px;
    }
    .banner {
        height: 250px;
        background-image: url(Elementos/Modelo/Banner11.png);
    }
}

@media (max-width: 768px) {
    #Contacto {
        gap: 0px;
    }

    #Contacto .WhatsApp a,
    #Contacto .MensajeD a,
    #Contacto .Instagram a {
        width: 40%;
        text-align: center;
        padding: 20px;
        font-size: 7px;
    }






    /*carrito*/

    #carrito {
      display: grid;
    grid-template-columns: repeat(1, 1fr) !important;
      gap: 45px;
      padding: 20px;
      margin: auto;
    }

        .producto {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 15px;
      padding: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s, box-shadow 0.2s;
      width: 200px;
      align-items: center;
    }

    .producto:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .envio-banner h2{
  font-size: 3vh;
  background-color: #000000;
  font-weight: 300;
  z-index: 100;
  padding-left: 3vh;
  padding-right: 2vh;
  border-right: 2px solid white;
}

.envio-movil {
  display: flex;
  align-items: center;
  position: absolute;
  white-space: nowrap;
  animation: moverCamion 10s linear infinite;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #ffffff;
  gap: 10px;
  font-weight: 100 !important;
}

.envio-movil img {
  height: 20px;
}

    .CarritoAlinear{
      display: flex;
      flex-direction: column;
      align-items: first baseline;
      margin-left: 5%;
    }

    .producto{
      width: 250px !important;
    }

    .producto img {
      width: 80% !important;
      border-radius: 10px;
      margin-bottom: 10px;
    }

    .producto h3 {
      margin: 10px 0 5px;
      font-size: 1.3em;
      color: #111;
    }

    .producto p {
      margin: 5px 0;
      font-size: 0.95em;
      color: #444;
      font-weight: 400;
    }

    .eliminar-btn {
      display: flex;
      background-color: rgb(0, 0, 0);
      color: white;
      border: none;
      margin-top: 10px;
      border-radius: 5px;
      cursor: pointer;
      align-content: center;
      justify-content: center;
      align-items: center;
    }

    .eliminar-btn:hover {
      background-color: rgb(61, 61, 61);
    }

    .eliminar-btn img{
      width: 22px !important;
      height: 20px;
    }

    .alinear{
      margin-top: 35%;
      display: flex;
      align-items: center;
    }

    .movile{
      display: none;
    }

    .dropdown-label img{
    width: 15px !important;
  }

  #welcomeMessage{
    display: none;
  }

  .menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
  margin-right: auto; /* Lo pone a la izquierda del logo */
  margin-left: -15px;
  margin-right: 5px;
}
}



    /* Botón de carrito */
    #cartButton {
      position: fixed;
      top: 20px;
      right: 20px;
      background-color: black;
      color: white;
      border: none;
      padding: 10px 15px;
      cursor: pointer;
      z-index: 1000;
    }

    /* Contenedor del carrito */
    #cartContainer {
      position: fixed;
      top: 0;
      right: -400px;
      width: 400px;
      height: 100vh;
      background-color: white;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
      z-index: 999;
      transition: right 0.3s ease;
      overflow-y: auto;
      padding: 20px;
    }

    /* Carrito visible */
    #cartContainer.active {
      right: 0;
    }

    /* Botón cerrar dentro del carrito */
    #closeCart {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 20px;
      background: none;
      border: none;
      cursor: pointer;
    }

    #cartContainer h2 {
      margin-top: 40px;
    }

    /* Estilo de items del carrito */
    .cart-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
    }

   .dropdown {
    margin-bottom: 10px;
  }

  .dropdown input[type="checkbox"] {
    display: none;
  }

  .dropdown-label {
    background: #9c335b;
    color: white;
    display: block;
    cursor: pointer;
    width:140px;
    margin-bottom: 5px;
    padding: 15px;
    font-size: 16px;
  }

   .dropdown-label img{
    width: 15px;
    margin-left: 5px;
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
  }

  #toggle-tienda:checked + label img {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

#toggle-fiesta:checked + label img {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

#toggle-casual:checked + label img {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

#toggle-vestidos:checked + label img {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

  .dropdown-label:hover{
    background-color: #ffe0fa;
  color: #9c335b;
  }

  .dropdown-content {
    display: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    background: #e9a5b9;
    border-left: 2px solid rgb(152, 212, 209)
  }

  .dropdown input:checked ~ .dropdown-content {
    display: block;
  }

  .dropdown-content a {
    display: block;
    padding: 5px;
    text-decoration: none;
  }

  .dropdown-content a:hover {
    background-color: #ffe0fa;
    color: #9c335b;
  }

  .sidebar {
  position: fixed;
  top: 0;
  left: -220px;
  width: 200px;
  height: 100vh; /* asegurar altura de pantalla */
  background-color: #9c335b;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow-y: auto; /* <--- esto hace scroll interno */
}


.sidebar a {
  color: white;
  padding: 15px 20px;
  text-decoration: none;
  font-size: 16px !important;
}

.sidebar a:hover {
  background-color: #ffe0fa;
  color: #9c335b;
}

/* Estado abierto */
.sidebar.open {
  left: 0;
}

.sideTop{
    width: 100.3%;
    background-color: #ffffff;
    margin-top: 0;
    height: 90px;
    margin-bottom: 35px;
}

.sideTop img{
    margin: 35px 5px 0px 10px;
}


/* Transición de icono a X */
.menu-icon.open .bar:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}
.menu-icon.open .bar:nth-child(2) {
  opacity: 0;
}
.menu-icon.open .bar:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* Responsive opcional */
@media (max-width: 600px) {
  .logo {
    height: 30px;
  }
  .sidebar {
    max-width: 100%;
  }
}