@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

html, body {
    height: 100%;
}

*
{
    font-family: 'Poppins', sans-serif;
}

:root {
    /*--bs-body-color: #fff; /* Cambia esto al color deseado */ 
}

.navbar-brand img
{
    filter: invert(1);
}

.social-list .list-group-item {
    background-color: transparent;
    border: none;
    transition: transform 0.3s ease;
}

.social-list .list-group-item:hover {
    transform: translateX(15%);
    cursor: pointer;
}


#m1:hover
{
    color: #f9177c;
}
#m2:hover
{
    color: #ffe203;
}

#beers
{
    overflow-x: auto; /* Permite el desplazamiento horizontal */
    -webkit-overflow-scrolling: touch; /* Hace el desplazamiento más fluido en iOS */
    white-space: nowrap; /* Evita que los elementos se envuelvan y los mantiene en una línea */
}

#beers .list-group-item {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#beers .list-group-item:hover {
    transform: translateY(-15%);
}

.beer-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#pre-title
{
    font-size: clamp(1rem, 3vw, 2rem);
    color: #000;
}

.beer-can {
    filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.3));
    width: 100%; /* Asegura que la imagen ocupe el 100% del contenedor */
    max-width: 300px; /* Ajusta el tamaño máximo de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Evita que la imagen sea inline, y que el contenedor tome el tamaño adecuado */
    margin: 0 auto; /* Centra la imagen dentro del contenedor */
}
/* Ajuste para pantallas más pequeñas */
@media (max-width: 1400px) {
    .beer-can {
        max-width: 47%; /* Asegura que la imagen no se salga en pantallas pequeñas */
    }
}

.beer-container::after {
    content: '';
    position: absolute;
    bottom: 10px; /* Ajusta según la posición de la base */
    width: 100px; /* Tamaño de la sombra */
    height: 20px; /* Altura de la sombra */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 80%);
    z-index: -1;
    filter: blur(4px);
}
.beer-container .list-group-item
{
    background-color: transparent;
    border: none;
    line-height: 0.8;
}
.beer-container .list-group-item h1
{
    line-height: 0.3;
    font-size: clamp(1.2rem, 5vw, 1.65rem);
}



#estilo-beer {
    margin-bottom: 10px; /* Ajusta el valor según tus necesidades */
    color: #ffe203;
    font-size: clamp(1.1rem, 3vw, 1.2rem);
}

#titulo-principal h1
{
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    font-size: clamp(1.5rem, 5vw, 3rem);
}
#titulo-principal h1 span
{
    font-size: 6vw;
    font-weight: 800;
}

#contenido-principal
{
    width: 100%;
    height: 100%;
}

#texto-growler{
    line-height: 20px;
}



:root {
    --color-bg1: rgb(168, 163, 22); /* EXPERIMENTAL */
    --color-bg2: rgb(136, 15, 88); /* EXPERIMENTAL */
    --color-bg3: rgb(7, 10, 28); /* APALO */
    --color-bg4: rgb(40, 61, 159); /* APALO */
    --color-bg5: rgb(59, 5, 83); /* WICK */
    --color-bg6: rgb(173, 47, 31); /* WICK */
    --color-bg7: rgb(151, 141, 78); /* SLURP */
    --color-bg8: rgb(241, 218, 73); /* SLURP */
    --color-bg9: rgb(5, 10, 22); /* C137 */
    --color-bg10: rgb(20, 34, 61); /* C137 */
    --color-bg11: rgb(26, 27, 92); /* SHERLOCK */
    --color-bg12: rgb(31, 20, 68); /* SHERLOCK */


    --color1: 18, 113, 255; /* APALO */
    --color2: 221, 74, 255; /* APALO */
    --color3: 100, 220, 255; /* APALO */
    --color4: 200, 50, 50; /* APALO */
    --color5: 180, 180, 50; /* APALO */
    --color6: 210, 240, 17; /* EXPERIMENTAL */
    --color7: 93, 17, 99; /* EXPERIMENTAL */
    --color8: 117, 196, 37; /* EXPERIMENTAL */
    --color9: 37, 154, 196; /* EXPERIMENTAL */
    --color10: 28, 232, 164; /* EXPERIMENTAL */
    --color11: 52, 104, 119; /* WICK CIRCULO CENTRAL*/ 
    --color12: 87, 174, 64; /* WICK */
    --color13: 192, 202, 118; /* WICK */
    --color14: 93, 10, 93; /* WICK */
    --color15: 52, 104, 119; /* WICK */
    --color16: 92, 163, 85; /* SLURP CENTRAL */ 
    --color17: 234, 123, 19; /* SLURP CENTRAL 2*/ 
    --color18: 161, 225, 23; /* SLURP Central TOP*/ 
    --color19: 43, 78, 69; /* SLURP LEFT RIGH*/ 
    --color20: 234, 123, 19; /* SLURP */ 
    --color21: 50, 81, 84; /* c137 CENTRAL */ 
    --color22: 50, 57, 100; /* c137 CENTRAL 2*/ 
    --color23: 68, 123, 95; /* c137 Central TOP */ 
    --color24: 43, 78, 69; /* c137 LEFT RIGH*/ 
    --color25: 160, 199, 54; /* c137 */
    --color26: 113, 72, 190; /* SHERLOCK CENTRAL */ 
    --color27: 75, 142, 209; /* SHERLOCK CENTRAL 2*/ 
    --color28: 124, 66, 206; /* SHERLOCK Central TOP*/ 
    --color29: 214, 37, 206; /* SHERLOCK LEFT RIGH*/ 
    --color30: 206, 159, 188; /* SHERLOCK */  
    --color-interactive-apo: 97, 223, 68;
    --color-interactive-e: 236, 229, 20;
    --color-interactive-wick: 250, 29, 0;
    --color-interactive-slurp: 161, 225, 23;
    --color-interactive-c137: 172, 248, 132;
    --color-interactive-sherlock: 7, 190, 148;
    --circle-size: 80%;
    --blending: hard-light;
}

@keyframes moveInCircle {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes moveVertical {
    0% {
        transform: translateY(-50%);
    }
    50% {
        transform: translateY(50%);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes moveHorizontal {
    0% {
        transform: translateX(-50%) translateY(-10%);
    }
    50% {
        transform: translateX(50%) translateY(10%);
    }
    100% {
        transform: translateX(-50%) translateY(-10%);
    }
}

/* Asegúrate de que la sección cubra todo el fondo */
.gradient-bg-e {
    position: fixed; /* Cambiar a 'absolute' para que esté debajo de los demás elementos */
    top: 0;
    left: 0;
    width: 100%; /* Asegura que ocupe todo el ancho de la ventana */
    height: 100%; /* Se asegura de cubrir al menos el viewport */
    z-index: -1; /* Ponerlo en el fondo, debajo de otros contenidos */
    overflow: hidden; /* Evita que cualquier contenido sobrepase los bordes */
    background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2)); /* Establece el gradiente de fondo */
}
/* Asegúrate de que la sección cubra todo el fondo */
.gradient-bg-apo {
    position: fixed; /* Cambiar a 'absolute' para que esté debajo de los demás elementos */
    top: 0;
    left: 0;
    width: 100%; /* Asegura que ocupe todo el ancho de la ventana */
    height: 100%; /* Se asegura de cubrir al menos el viewport */
    z-index: -1; /* Ponerlo en el fondo, debajo de otros contenidos */
    overflow: hidden; /* Evita que cualquier contenido sobrepase los bordes */
    background: linear-gradient(40deg, var(--color-bg3), var(--color-bg4)); /* Establece el gradiente de fondo */
}
.gradient-bg-wick {
    position: fixed; /* Cambiar a 'absolute' para que esté debajo de los demás elementos */
    top: 0;
    left: 0;
    width: 100%; /* Asegura que ocupe todo el ancho de la ventana */
    height: 100%; /* Se asegura de cubrir al menos el viewport */
    z-index: -1; /* Ponerlo en el fondo, debajo de otros contenidos */
    overflow: hidden; /* Evita que cualquier contenido sobrepase los bordes */
    background: linear-gradient(40deg, var(--color-bg5), var(--color-bg6)); /* Establece el gradiente de fondo */
}
.gradient-bg-slurp {
    position: fixed; /* Cambiar a 'absolute' para que esté debajo de los demás elementos */
    top: 0;
    left: 0;
    width: 100%; /* Asegura que ocupe todo el ancho de la ventana */
    height: 100%; /* Se asegura de cubrir al menos el viewport */
    z-index: -1; /* Ponerlo en el fondo, debajo de otros contenidos */
    overflow: hidden; /* Evita que cualquier contenido sobrepase los bordes */
    background: linear-gradient(40deg, var(--color-bg7), var(--color-bg8)); /* Establece el gradiente de fondo */
}
.gradient-bg-c137 {
    position: fixed; /* Cambiar a 'absolute' para que esté debajo de los demás elementos */
    top: 0;
    left: 0;
    width: 100%; /* Asegura que ocupe todo el ancho de la ventana */
    height: 100%; /* Se asegura de cubrir al menos el viewport */
    z-index: -1; /* Ponerlo en el fondo, debajo de otros contenidos */
    overflow: hidden; /* Evita que cualquier contenido sobrepase los bordes */
    background: linear-gradient(40deg, var(--color-bg9), var(--color-bg10)); /* Establece el gradiente de fondo */
}
.gradient-bg-sherlock {
    position: fixed; /* Cambiar a 'absolute' para que esté debajo de los demás elementos */
    top: 0;
    left: 0;
    width: 100%; /* Asegura que ocupe todo el ancho de la ventana */
    height: 100%; /* Se asegura de cubrir al menos el viewport */
    z-index: -1; /* Ponerlo en el fondo, debajo de otros contenidos */
    overflow: hidden; /* Evita que cualquier contenido sobrepase los bordes */
    background: linear-gradient(40deg, var(--color-bg11), var(--color-bg12)); /* Establece el gradiente de fondo */
}

/* Para los círculos de gradientes animados */
.gradients-container {
    filter: url(#goo) blur(40px);
    width: 100%;
    min-height: 100vh; /* Se asegura de cubrir al menos el viewport */
    height: auto;
    top: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1; /* Mantenerlos detrás del contenido */
}

.g1-apo, .g2-apo, .g3-apo, .g4-apo, .g5-apo
{
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    opacity: 1;
    animation: moveVertical 30s ease infinite;
}
.g1-e, .g2-e, .g3-e, .g4-e, .g5-e
{
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color6), 0.8) 0, rgba(var(--color6), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    opacity: 1;
    animation: moveVertical 30s ease infinite;
}
.g1-wick, .g2-wick, .g3-wick, .g4-wick, .g5-wick
{
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color11), 0.8) 0, rgba(var(--color11), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    opacity: 1;
    animation: moveVertical 30s ease infinite;
}
.g1-slurp, .g2-slurp, .g3-slurp, .g4-slurp, .g5-slurp
{
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color16), 0.8) 0, rgba(var(--color16), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    opacity: 1;
    animation: moveVertical 30s ease infinite;
}
.g1-c137, .g2-c137, .g3-c137, .g4-c137, .g5-c137
{
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color21), 0.8) 0, rgba(var(--color21), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    opacity: 1;
    animation: moveVertical 30s ease infinite;
}
.g1-sherlock, .g2-sherlock, .g3-sherlock, .g4-sherlock, .g5-sherlock
{
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color26), 0.8) 0, rgba(var(--color26), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    opacity: 1;
    animation: moveVertical 30s ease infinite;
}




/* Aquí aplicamos los colores a los círculos */
.g1-apo {
    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
}
.g2-apo {
    background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
    animation: moveInCircle 20s reverse infinite;
}
.g3-apo {
    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
    animation: moveInCircle 40s linear infinite;
}
.g4-apo {
    background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
    animation: moveHorizontal 40s ease infinite;
}
.g5-apo {
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;
}

/* CIRCULOS EXPERIMENTAL */
/* Aquí aplicamos los colores a los círculos */
.g1-e {
    background: radial-gradient(circle at center, rgba(var(--color6), 0.8) 0, rgba(var(--color6), 0) 50%) no-repeat;
}
.g2-e {
    background: radial-gradient(circle at center, rgba(var(--color7), 0.8) 0, rgba(var(--color7), 0) 50%) no-repeat;
    animation: moveInCircle 20s reverse infinite;
}
.g3-e {
    background: radial-gradient(circle at center, rgba(var(--color8), 0.8) 0, rgba(var(--color8), 0) 50%) no-repeat;
    animation: moveInCircle 40s linear infinite;
}
.g4-e {
    background: radial-gradient(circle at center, rgba(var(--color9), 0.8) 0, rgba(var(--color9), 0) 50%) no-repeat;
    animation: moveHorizontal 40s ease infinite;
}
.g5-e {
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    background: radial-gradient(circle at center, rgba(var(--color10), 0.8) 0, rgba(var(--color10), 0) 50%) no-repeat;
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;
}

.g1-wick {
    background: radial-gradient(circle at center, rgba(var(--color11), 0.8) 0, rgba(var(--color11), 0) 50%) no-repeat;
}
.g2-wick {
    background: radial-gradient(circle at center, rgba(var(--color12), 0.8) 0, rgba(var(--color12), 0) 50%) no-repeat;
    animation: moveInCircle 20s reverse infinite;
}
.g3-wick {
    background: radial-gradient(circle at center, rgba(var(--color13), 0.8) 0, rgba(var(--color13), 0) 50%) no-repeat;
    animation: moveInCircle 40s linear infinite;
}
.g4-wick {
    background: radial-gradient(circle at center, rgba(var(--color14), 0.8) 0, rgba(var(--color14), 0) 50%) no-repeat;
    animation: moveHorizontal 40s ease infinite;
}
.g5-wick {
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    background: radial-gradient(circle at center, rgba(var(--color15), 0.8) 0, rgba(var(--color15), 0) 50%) no-repeat;
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;
}

.g1-slurp {
    background: radial-gradient(circle at center, rgba(var(--color16), 0.8) 0, rgba(var(--color16), 0) 50%) no-repeat;
}
.g2-slurp {
    background: radial-gradient(circle at center, rgba(var(--color17), 0.8) 0, rgba(var(--color17), 0) 50%) no-repeat;
    animation: moveInCircle 20s reverse infinite;
}
.g3-slurp {
    background: radial-gradient(circle at center, rgba(var(--color18), 0.8) 0, rgba(var(--color18), 0) 50%) no-repeat;
    animation: moveInCircle 40s linear infinite;
}
.g4-slurp {
    background: radial-gradient(circle at center, rgba(var(--color19), 0.8) 0, rgba(var(--color19), 0) 50%) no-repeat;
    animation: moveHorizontal 40s ease infinite;
}
.g5-slurp {
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    background: radial-gradient(circle at center, rgba(var(--color20), 0.8) 0, rgba(var(--color20), 0) 50%) no-repeat;
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;
}

.g1-c137 {
    background: radial-gradient(circle at center, rgba(var(--color21), 0.8) 0, rgba(var(--color21), 0) 50%) no-repeat;
}
.g2-c137 {
    background: radial-gradient(circle at center, rgba(var(--color22), 0.8) 0, rgba(var(--color22), 0) 50%) no-repeat;
    animation: moveInCircle 20s reverse infinite;
}
.g3-c137 {
    background: radial-gradient(circle at center, rgba(var(--color23), 0.8) 0, rgba(var(--color23), 0) 50%) no-repeat;
    animation: moveInCircle 40s linear infinite;
}
.g4-c137 {
    background: radial-gradient(circle at center, rgba(var(--color24), 0.8) 0, rgba(var(--color24), 0) 50%) no-repeat;
    animation: moveHorizontal 40s ease infinite;
}
.g5-c137 {
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    background: radial-gradient(circle at center, rgba(var(--color25), 0.8) 0, rgba(var(--color25), 0) 50%) no-repeat;
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;
}

.g1-sherlock {
    background: radial-gradient(circle at center, rgba(var(--color26), 0.8) 0, rgba(var(--color26), 0) 50%) no-repeat;
}
.g2-sherlock {
    background: radial-gradient(circle at center, rgba(var(--color27), 0.8) 0, rgba(var(--color27), 0) 50%) no-repeat;
    animation: moveInCircle 20s reverse infinite;
}
.g3-sherlock {
    background: radial-gradient(circle at center, rgba(var(--color28), 0.8) 0, rgba(var(--color28), 0) 50%) no-repeat;
    animation: moveInCircle 40s linear infinite;
}
.g4-sherlock {
    background: radial-gradient(circle at center, rgba(var(--color29), 0.8) 0, rgba(var(--color29), 0) 50%) no-repeat;
    animation: moveHorizontal 40s ease infinite;
}
.g5-sherlock {
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    background: radial-gradient(circle at center, rgba(var(--color30), 0.8) 0, rgba(var(--color30), 0) 50%) no-repeat;
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;
}

.interactive-apo {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color-interactive-apo), 0.8) 0, rgba(var(--color-interactive-apo), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: 100%;
    min-height: 100vh; /* Se asegura de cubrir al menos el viewport */
    height: auto;
    top: -50%;
    left: -50%;
    opacity: 0.7;
}
.interactive-e {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color-interactive-e), 0.8) 0, rgba(var(--color-interactive-e), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: 100%;
    min-height: 100vh; /* Se asegura de cubrir al menos el viewport */
    height: auto;
    top: -50%;
    left: -50%;
    opacity: 0.7;
}

.interactive-wick {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color-interactive-wick), 0.8) 0, rgba(var(--color-interactive-wick), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: 100%;
    min-height: 100vh; /* Se asegura de cubrir al menos el viewport */
    height: auto;
    top: -50%;
    left: -50%;
    opacity: 0.7;
}

.interactive-slurp {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color-interactive-slurp), 0.8) 0, rgba(var(--color-interactive-slurp), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: 100%;
    min-height: 100vh; /* Se asegura de cubrir al menos el viewport */
    height: auto;
    top: -50%;
    left: -50%;
    opacity: 0.7;
}

.interactive-c137 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color-interactive-c137), 0.8) 0, rgba(var(--color-interactive-c137), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: 100%;
    min-height: 100vh; /* Se asegura de cubrir al menos el viewport */
    height: auto;
    top: -50%;
    left: -50%;
    opacity: 0.7;
}
.interactive-sherlock {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color-interactive-sherlock), 0.8) 0, rgba(var(--color-interactive-sherlock), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: 100%;
    min-height: 100vh; /* Se asegura de cubrir al menos el viewport */
    height: auto;
    top: -50%;
    left: -50%;
    opacity: 0.7;
}



#rocket {
    display: inline-block;
    animation: rocketLaunch 10s ease-in-out infinite;
}

/* Vibración al inicio (simulando el despegue) */


/* Ascenso y aterrizaje */
@keyframes rocketLaunch {
    0% {
        transform: rotate(-45deg) translateY(90); /* Posición inicial */
    }
    30% {
        transform: rotate(-45deg) translateY(90); /* Despegue hacia arriba */
    }
    60% {
        transform: rotate(-45deg) translateY(0); /* Sigue subiendo */
    }
    100% {
        transform: rotate(-45deg) translateY(90); /* Regreso a la posición inicial */
    }
}


.progress-bar-container {
    position: relative;
    height: 20px;
    width: 100%;
    border-radius: 10px;
    background: linear-gradient(to right, var(--color-start, yellow), var(--color-end, green));
    overflow: hidden;
    margin-bottom: 0px;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc((var(--value, 0) - 0.3) / (1 - 0.3) * 100%);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Barra de progreso para valores 0-100 */
.progress-bar-container[style*="--value:"] .progress-bar {
    width: calc(var(--value) * 1%);
}

.value-indicator {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-size: clamp(0.5rem, 2vw, 0.8rem);
    font-weight: bold;
    color: #000;
    white-space: nowrap;
}



.btn-glow
{
    color:#fff;
    background: #111;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none; /* Asegura que no haya borde */
    outline: none; /* Elimina el contorno del botón */
    font-size: clamp(0.5rem, 2vw, 0.8rem);
    margin-top: 5px;
}

.btn-glow:hover
{
    background: linear-gradient(to right, #03a9f4, #f441a5);
    color: #fff !important;
}

.btn-cart1
{
    color:#fff;
    background: #111;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none; /* Asegura que no haya borde */
    outline: none; /* Elimina el contorno del botón */
    font-size: clamp(0.5rem, 2vw, 0.8rem);
    margin-top: 5px;
}

.btn-cart1:hover
{
    background: linear-gradient(to right, #03d8f4, #04f5a5);
    color: #000 !important;
}

.btn-cart2
{
    color:#fff;
    background: #111;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none; /* Asegura que no haya borde */
    outline: none; /* Elimina el contorno del botón */
    font-size: clamp(0.5rem, 2vw, 0.8rem);
    margin-top: 5px;
}

.btn-cart2:hover
{
    background: linear-gradient(to right, #f4bc03, #d0f500);
    color: #000 !important;
}

.btn-cart3
{
    color:#fff;
    background: #111;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none; /* Asegura que no haya borde */
    outline: none; /* Elimina el contorno del botón */
    font-size: clamp(0.5rem, 2vw, 0.8rem);
    margin-top: 5px;
}

.btn-cart3:hover
{
    background: linear-gradient(to right, #f40398, #d80b2d);
    color: #fff !important;
}


.nav-tabs .nav-link {
    color: #fff; /* Color del texto para los tabs inactivos */
    background-color: #151515; /* Fondo blanco para tabs inactivos */
    border: 1px solid #ddd; /* Borde sutil */
    border-top-left-radius: 5px; /* Redondea la esquina superior izquierda */
    border-top-right-radius: 5px; /* Redondea la esquina superior derecha */
    border-bottom-left-radius: 0; /* Mantiene la esquina inferior izquierda sin redondear */
    border-bottom-right-radius: 0; /* Mantiene la esquina inferior derecha sin redondear */
}

.nav-tabs .nav-link:hover {
    color: #333; /* Cambia el color al pasar el mouse */
    background-color: #f8f9fa; /* Fondo más claro al pasar el mouse */
}

.nav-tabs .nav-link.active {
    color: #fff; /* Color del texto para el tab activo */
    background: linear-gradient(to right, #03f39b, #054871); /* Gradiente para el tab activo */
    border-top-left-radius: 5px; /* Redondea la esquina superior izquierda */
    border-top-right-radius: 5px; /* Redondea la esquina superior derecha */
    border-bottom-left-radius: 0; /* Mantiene la esquina inferior izquierda sin redondear */
    border-bottom-right-radius: 0; /* Mantiene la esquina inferior derecha sin redondear */
    font-weight: bold; /* Texto en negrita */
}

/* Opcional: ajusta el espaciado entre tabs */
.nav-tabs {
    gap: 0.2rem; /* Espacio entre tabs */
}



/* Reglas para pantallas grandes */
@media (min-width: 769px) {
    .social-list-movil {
        display: none; /* Oculta la versión móvil en pantallas grandes */
    }
    .redes-sociales .social-list {
        display: flex; /* Muestra la lista normal */
    }
}

/* Reglas para pantallas pequeñas */
@media (max-width: 768px) {
    .redes-sociales .social-list {
        display: none; /* Oculta la versión de escritorio */
    }
    .social-list-movil {
        display: flex; /* Muestra la versión móvil */
    }
}

.social-list-movil {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
    justify-content: start;
}



.lab .list-group-item
{
    background-color: transparent;
    border: none;
    line-height: 0.8;
}

/* Eliminar los botones del input[type="number"] en todos los navegadores */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* Para Firefox */ 
}

.modal-content.bg-dark {
    background-color: #343a40;
    color: white;
}
.toast.text-bg-success {
    background-color: #198754;
    color: white;
}

/* Cuando el mouse pasa sobre la imagen, se aplica el filtro en blanco y negro */
.no {
    filter: grayscale(100%); /* Aplica el filtro en blanco y negro */
}

/* Estilo para el toast */
.toast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.toast.show {
    visibility: visible;
    opacity: 1;
}


/* Asegúrate de que el contenedor principal no cambie el flujo */
.container-fluid {
    position: relative;
}

/* Alineación general de la barra de navegación */
.navbar-nav {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

/* Carrito en pantallas grandes */
.cart-container {
    position: relative;
    z-index: 1050;
}

/* Para pantallas medianas y grandes (min-width: 992px) */
@media (min-width: 992px) {
    /* Alineamos el carrito a la izquierda del botón hamburguesa */
    .navbar-collapse {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    /* Aseguramos que el carrito quede justo a la izquierda del botón hamburguesa */
    .cart-container {
        margin-right: 15px; /* Ajusta el espaciado entre el carrito y el botón */
    }
}

/* Para pantallas pequeñas */
@media (max-width: 991px) {
    /* Contenedor del carrito antes del botón hamburguesa */
    .navbar-nav {
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }

    /* El carrito va justo antes del botón hamburguesa */
    .cart-container {
        order: -1;  /* Asegura que el carrito vaya antes que el botón hamburguesa */
        margin-right: 10px; /* Espaciado para que no se solape */
    }

    .navbar-toggler {
        z-index: 1040; /* Aseguramos que el carrito no se monte sobre el botón */
    }
}

/* Para los íconos y links del menú */
.nav-link {
    font-size: 1rem;
    padding: 5px 10px;
}