@font-face {
    font-family: "Gulfs Display";
    src: url('../fonts/gulfs/GulfsDisplay-Normal.woff2') format('woff2');
    src: url('../fonts/gulfs/GulfsDisplay-Normal.woff') format('woff');
    src: url('../fonts/gulfs/GulfsDisplay-Normal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Anybody';
    src: url('../fonts/anybody/Anybody-VariableFont_wdth\,wght.ttf') format('truetype');
    font-style: normal;
    font-weight: 100 900;
}

html:focus-within {
    scroll-behavior: smooth;
}

img,
picture,
svg {
    max-width: 100%;
    display: block;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    color:inherit;
    font: inherit;
}

.oculto {
    display: none;
}

.gulfs {
    font-family: "Gulfs Display";
}

.decoracion {
    position: absolute;
}

.caja-imagen {
    position: relative;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    overflow: hidden;
    display: flex;
    border: 2px solid black;
}

/* 
-----------------------------------------------------------------------------
ANIMACIONES GENERALES
-----------------------------------------------------------------------------
*/

.boton:hover {
    filter: brightness(0.95);
    cursor: pointer;
}

.hyper:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
} 

.boton:active {
    animation: pressButton 0.2s ease;
}

.estrella {
    animation: twinkle-and-move 2.5s infinite ease-in-out 0.4s;
}

@keyframes pressButton {
    0% { transform: scale(1); }
    50% { transform: scale(0.88); }
    100% { transform: scale(1); }
}

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

@keyframes twinkle {
    0%, 100% {
      opacity: 0.2;
      transform: scale(0.8);
    }
    50% {
      opacity: 1;
      transform: scale(1.2);
    }
}

@keyframes twinkle-and-move {
    0%, 100% {
      opacity: 0.2;
      transform: scale(0.8) translate(0, 0);
    }
    50% {
      opacity: 1;
      transform: scale(1.2) translate(2px, -2px);
    }
}

@keyframes tilt {
    0%, 100% {
      transform: rotate(-5deg);
    }
    50% {
      transform: rotate(5deg);
    }
  }

/* 
-----------------------------------------------------------------------------
BOTÓN DE CHAT 
-----------------------------------------------------------------------------
*/

.boton-chat {
    position: fixed;
    z-index: 100;
    bottom: 2%; /* Positions the button 2% from the bottom */
    right: 1%;  /* Positions the button 2% from the right */
    width: clamp(70px, 8vw, 75px); /* Slightly reduced middle value for responsiveness */
    height: clamp(70px, 8vw, 75px);
    border: 2px solid black;
    border-radius: 50%;
    background-color: #FFF35F;
    display: flex;           /* Centers any content inside the button */
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.8); /* Optional: adds a shadow for depth */
}

.boton-chat h1 {
    font-weight: 800;
    font-family: Anybody;
    font-size: clamp();
    margin: 0;
}

.efecto-negro {
    display: none;
}

/* 
-----------------------------------------------------------------------------
SECCIONES DE LA PAGINA
-----------------------------------------------------------------------------
*/

.contenedor-grid {
    display: grid;
    grid-template-rows: repeat(5, minmax(300px, auto));
}

.seccion-inicial {
    background-color: #F1B4D6;
    border-bottom: 2px solid black;
    height: 60vw;
}

#seccion-nosotros {
    background-color: #FFF35F;
    height: 85vw;
}

#seccion-galeria {
    background-color: #FF6541;
}

#seccion-precios {
    background-color: #F1B4D6;
}

#seccion-contacto {
    background-color: #F1B4D6;
}

/* 
-----------------------------------------------------------------------------
MENU DE NAVEGACIÓN
-----------------------------------------------------------------------------
*/

.menu-navegacion {
    position: absolute;
    right: 0%;
    top: 2%;
    display: flex;
    height: 4vh;
    width: 50vw;
    justify-content: end;
}

#icono-equis-menu {
    width: 80%;
    padding: 10%;
}

.item {
    display: inline-block;
    margin-right: clamp(10px, 8.5vw, 55px);
    font-size: clamp(1rem, 6vw, 1.1rem);
}

.item1 {
    background-image: url('../img/heart.svg');
    background-size: 16px 16px; /* Adjust size as needed */
    background-repeat: no-repeat;
    background-position: 0 20%; /* Align image to the left and vertically centered */
    padding-left: 24px; /* Space to the left to accommodate the image */
}

.item2 {
    background-image: url('../img/estrella.svg');
    background-size: 16px 16px; /* Adjust size as needed */
    background-repeat: no-repeat;
    background-position: 0 20%; /* Align image to the left and vertically centered */
    padding-left: 24px; /* Space to the left to accommodate the image */
}

.item3 {
    background-image: url('../img/figura.svg');
    background-size: 16px 16px; /* Adjust size as needed */
    background-repeat: no-repeat;
    background-position: 0 20%; /* Align image to the left and vertically centered */
    padding-left: 24px; /* Space to the left to accommodate the image */
}

.item4 {
    background-image: url('../img/polvora.svg');
    background-size: 16px 16px; /* Adjust size as needed */
    background-repeat: no-repeat;
    background-position: 0 20%; /* Align image to the left and vertically centered */
    padding-left: 24px; /* Space to the left to accommodate the image */
}

.item:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* 
-----------------------------------------------------------------------------
IMAGENES TEXTO SECCION INICIAL
-----------------------------------------------------------------------------
*/

.seccion-inicial h1{
    color: #1357EB;
    font-size: clamp(1.8rem, 6vw, 5rem);

}

.seccion-inicial .titulo-principal {
    position: relative;
    margin: auto;
    max-width: fit-content;
    top: 9vw;
    z-index: 1;
}

.gulfs.titulo-principal span {
    display: block;
    text-align: center;
    height: 4.8vw;
}

.seccion-inicial .caja-imagen-central {
    top: 8vw;
    border-radius: 40vw;
    margin: auto;
}

#imagen-principal {
    width: 40vw;
    height: 55vw;
}

.circulo-sonriente {
    right: 14%;
    width: 12vw;
    top: 54vw;
    animation: spin 7s linear infinite;
}

.rayo {
    right: 16%;
    top: 27vw;
    width: clamp(65px, 12vw, 200px);
    animation: tilt 2s ease-in-out infinite;
    z-index: 1;
}

.estrella1 {
    right: 25%;
    top: 35vw;
    width: clamp(10px, 3vw, 80px);    
}

.estrella2 {
    left: 20%;
    top: 16vw;
    width: clamp(10px, 3vw, 80px);    
}

.estrella3 {
    left: 24%;
    top: 28vw;
    width: clamp(18px, 6vw, 100px);    
}

.figura-celeste {
    left: 25.5vw;
    top: 55.5vw;
    width: 8vw; 
    animation: spin 10s linear infinite;
}

.caja-imagen-izquierda {
    position: absolute;
    top: 32vw;
    left: -6%;
    border-radius: 10%;
}

#imagen-inicial-izquierda {
    width: 28vw;
    height: 38vw;    
}

#imagen-inicial-derecha {
    width: 17vw;
    height: 22vw; 
}

.caja-imagen-derecha {
    position: absolute;
    top: 13vw;
    right: 3%;
    border-radius: 10%;
}

#checkbox-menu,
#icono-rayas-menu,
#icono-equis-menu {
    display: none;
}

/* 
--------------------------------------------------------------------------
SECCIÓN NOSOTROS
--------------------------------------------------------------------------
*/

.boton1 {
    top: clamp(80vw ,1vw, 20vw);
    left: clamp(2.5vw ,1vw, 2.5vw);
    animation: pressButton  2s ease-in-out infinite;
}

.boton2 {
    top: clamp(80vw ,1vw, 20vw);
    right: clamp(2.5vw ,1vw, 2.5vw);
    animation: pressButton  2s ease-in-out infinite;
}

.boton3 {
    top: clamp(135vw ,1vw, 20vw);
    left: clamp(2.5vw ,1vw, 2.5vw); 
    animation: pressButton  2s ease-in-out infinite;  
}

.boton4 {
    top: clamp(135vw ,1vw, 20vw);
    right: clamp(2.5vw ,1vw, 2.5vw);    
    animation: pressButton  2s ease-in-out infinite;

}

.mensaje-botones {
    position: absolute;
    color: black;
    z-index: 5;
    font-family: sans-serif;
    font-weight: 700;
    letter-spacing: -0.05rem;
    font-size: clamp(1rem, 1.2rem, 2rem);
}

.mensaje-izquierdo {
    top: clamp(81vw ,1vw, 80vw);
    left: clamp(75px , 7vw, 8vw);
}

.mensaje-derecho {
    top: clamp(81vw ,1vw, 81vw);
    right: clamp(75px ,7vw, 8vw);
}

#pareja-confeti {
    height: 40vw;
    width:29vw;
    border: 2px solid black;
}

.marco {
    position: absolute;
    transform: rotate(-4deg);
    height: 41.5vw;
    --original-width: 29vw;
    width:29vw;
    box-shadow: 6px 4px 9px rgba(0, 0, 0, 0.9); /* Optional: adds a shadow for depth */
}

.marco-interior {
    --original-top: 86vw;
    top: 86vw;
    left: clamp(13vw ,1vw, 10vw);
    border-color: whitesmoke;
    border-width: 0.8vw;
    outline: 2px solid black;
    z-index: 11;
}

.marco-medio {
    --original-top: 87vw;
    --original-height: 42vw;
    top: 87vw;    
    background-color: #ffffff;
    left: clamp(12vw ,1vw, 10vw);
    z-index: 10;
    height: 42vw;
    width: 29vw;
    border: 2vw solid black;
    border-color: #F1B4D6;
    outline: 2px solid black;

}

.marco-exterior {
    background-color: #ffffff;
    --original-top: 89vw;
    --original-height: 41.5vw;
    top: 89vw;
    left: clamp(11vw ,1vw, 9vw);
    z-index: 10;
    height: 41.5vw;
    width: 29vw;
    border: 2vw solid black;
    border-color: #F1B4D6;
    outline: 2px solid black;
}

#seccion-nosotros .titulo-principal {
    --original-top: 86vw;
    --original-right: 22.5vw;
    position: absolute;
    display: flex;
    flex-direction: column;
    max-width: fit-content;
    max-height: fit-content;
    top: 86vw;
    right: 22.5vw;
    font-size: clamp(5.5vw, 11vw, 12rem);
    color: transparent;
    -webkit-text-stroke: 3px #1357EB;
    margin: auto;
}

#seccion-nosotros .gulfs.titulo-principal span {
    display: block;
    text-align: center;
    height: fit-content;
    height: 8.5vw;
}

#seccion-nosotros .descripcion {
    --original-top: 104vw;
    --original-right: 9vw;
    position: absolute;
    font-family: sans-serif;
    font-weight: 600;
    top: 104vw;
    right: 9vw;
    width: 50vw;
    height: 25vw;
    padding: 5%;
    line-height: 1.6vw;
    font-size: clamp(1.4vw, 1.4vw, 2rem);
}

#seccion-nosotros .mensaje-inferior {
    --original-top: 125vw;
    --original-right: 3vw;
    position: absolute;
    font-family: "Gulfs Display";
    font-weight: 400;
    top: 125vw;
    right: 3vw;
    width: 51vw;
    font-size: clamp(2.1vw, 2.1vw, 2.5rem);

}

.anillos {
    --original-top: 122.5vw;
    --original-right: 21%;
    right: 21%;
    top: 122.5vw;
    width: clamp(65px, 10vw, 130px); 
    animation: tilt 2s ease-in-out infinite;
}

.polvora-roja {
    --original-top: 121vw;
    --original-right: 13%;
    right: 13%;
    top: 121vw;
    width: clamp(65px, 10vw, 130px); 
    animation: tilt 2s ease-in-out infinite;
}

.ovalo-blanco {
    --original-top: 88vw;
    --original-right: 27vw;
    width: 30vw;
    height: 9.5vw;
    right: 27vw;
    top: 88vw;
    transform: rotate(-12deg);
}

/* 
--------------------------------------------------------------------------
SECCIÓN GALERIA
--------------------------------------------------------------------------
*/

.imagen5-responsive {
    display: none;
}

#seccion-galeria {
    border-top: 2px solid black;
    height: 76vw;
    border-bottom: 2px solid black;
    overflow: hidden;
} 

.area-blanca {
    position: absolute;
    height: 52vw;
    width: 100%;
    background-color: #ffe9f5;
}

.caja-grid {
    display: grid;
    position: absolute;
    margin-top: 4%;
    width: 100%;
    height: 61.5vw;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(20, 1fr);
    grid-gap: 3.5%;
}

#seccion-galeria .caja-imagen {
    border-radius: 18%;
    display: inline-block;
    position: relative;
}

.imagen-galeria {
    height: 30vw; 
    width: 20vw;  
}

.caja-imagen.foto-uno {
    position: relative;
    grid-area: 1 / 1 / 1 / 5;
    left: -3.7vw;
}

.caja-imagen.foto-dos {
    grid-area: 1 / 5 / 1 / 10;
    left: -3vw;

}

.caja-imagen.foto-tres {
    grid-area: 1 / 10 / 1 / 17;
    left: -5vw
}

.imagen-galeria.imagen3 {
    width: 100%;
}

.caja-imagen.foto-cuatro {
    grid-area: 1 / 17 / 1 / 23;
    left: -5vw;
}

.caja-imagen.foto-cinco {
    position: absolute;
    grid-area: 1 / 16 / 1 / 23;
    width: 18vw;
    height: 30vw;
    border-radius: 10%;
    transform: translateX(96vw);
    top: 4vw;
}

.caja-imagen.foto-seis {
    grid-area: 2 / 1 / 3 / 8;
    width: 40vw;
    left: -5vw;
    margin-top: 1.5vw;
}

.imagen-galeria.imagen6 {
    position: relative;
    width: 100%;
}


.caja-imagen.foto-siete {
    grid-area: 2 / 9 / 3 / 14;
    margin-top: 1.5vw;
    left: -2.5vw;
}

.caja-imagen.foto-ocho {
    grid-area: 2 / 14 / 3 / 20;
    margin-top: 1.5vw;
    width: 30vw;
    left: -4vw;
}

.imagen-galeria.imagen8 {
    width: 30vw;
}

.caja-imagen.foto-nueve {
    position: absolute;
    width: 18vw;
    height: 30vw;
    border-radius: 10%;
    top: 37.6vw;
    left: 72vw;
}

#imagen-chiquita,
#imagen-bonus,
#mujer-flores {
    display: none;
}

/* 
--------------------------------------------------------------------------
SECCIÓN PRECIOS
--------------------------------------------------------------------------
*/

.circulo-caracteres {
    position: absolute;
    border-radius: 100px;
    height: 1.8vw;
    width: 1.8vw;
    text-align: center;
}

#seccion-precios .caja-grid {
    display: grid;
    position: absolute;
    height: 70vw;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    grid-gap: 0;
}

#seccion-precios {
    height: 70vw;
    background-color: #1357EB;
}

.item-grid {
    border: 2px solid black;
    box-sizing: border-box;
}


.container1 {
    grid-area: 1 / 1 / 2 / 3;
    background-color: #F1B4D6;
    padding: 10%;
    padding-bottom: 4%;
    overflow: hidden;
    padding-right: 15%;
}

.container2 {
    grid-area: 1 / 3 / 3 / 4;
    background-color: #FFF35F;
}

.container3 {
    grid-area: 1 / 4 / 3 / 5;
    background-color: #ffe9f5;
}

.container4 {
    grid-area: 1 / 5 / 3 / 6;
    background-color: #1357EB;
}

.container5 {
    grid-area: 2 / 1 / 3 / 3;
    background-color: #F1B4D6;
    padding-left: 10%;
    padding-top: 10%;
}

.container5:hover,
.container7:hover {
    filter: none
}

.container6 {
    grid-area: 3 / 1 / 5 / 2;
    background-color: #FFF35F;
}

.container7 {
    grid-area: 3 / 2 / 5 / 4;
    background-color: black;
}

.container8 {
    grid-area: 3 / 4 / 4 / 6;
    background-color: #FF6541;
}

.container9 {
    grid-area: 4 / 4 / 5 / 6;
    background-color: #F1B4D6;
}

.container1 .gulfs {
    color: #FF6541;
    font-size: 4vw;
    line-height: 90%;
}

.container5 .gulfs {
    color: #1357EB;
    font-size: 2.5vw;
    line-height: 90%;
}

.circulo-interrogacion {
    position: absolute;
    background-color: white;
    color: black;
}

.barra-amarilla {
    background-color: #FFF35F;
    border: 1.8px solid black;
    border-radius: 50px;
    height: 1.5vw;
    width: 85%;
    margin-top: 12%;
    position: relative;
}

#disco-azul {
    width: 7vw;
    position: absolute;
    top: -200%;
    animation: spin 6s linear infinite;
}

.circulo-caracteres{
    top: 21.6vw;
    left: 26.5vw;
    background-color: #1357EB;
}

.circulo-caracteres .gulfs {
    margin-top: 0.2vw;
    font-size: 1.5vw;
    color: #F1B4D6
}

.numero {
    background-color: #1357EB;
    position: absolute;
    width: 2.2vw;
    height: 2vw;
    border-radius: 100%;
    text-align: center;
    border: 1.8px solid black;
    top: 21.5vw;
    left: 33vw;
}

.tres {
    font-size: 1.2vw;
    font-family: sans-serif;
    color: white;
    font-weight: 900;
}

.anillos2 {
    width: 14vw;
    top: 246.5vw;
    left: 36vw;
    animation: tilt 2s linear infinite;   
}

.container7 {
    padding-top: 12%;
    padding-left: 11%;
}

.mapa-usa {
    width: 32vw;
}

.container7 .gulfs,
.container7 .texto {
    color: white;
}

.container7 .inte-blanco {
    color: black;
}

.container7 .circulo-interrogacion {
    position: absolute;
    border-radius: 100px;
    margin-top: 0.2vw;
    font-size: 1.5vw;
    height: 1.8vw;
    width: 1.8vw;
    text-align: center;
    top: 40.2vw;
    left: 33vw;
}

.container7 .texto {
    position: relative;
    top: -2vw;
    font-weight: 600;
    left: 17.5vw;
    font-size: 1.3vw;
}

.container7 h1 {
    font-size: 2vw;
}

.camara {
    width: 14vw;
    top: 248vw;
    left: 73vw;
    animation: tilt 2s linear infinite;    
}

.container8 .total-mensaje {
    color: #F1B4D6;
    font-size: 2.5vw;
    position: absolute;
    top: 38vw;
    left: 63vw;
}

.container8 .precio {
    color: #FFF35F;
    font-size: 7.8vw;
    position: absolute;
    top: 40.5vw;
    left: 63vw;
}

.container2 .gulfs {
    color: #FF6541;
    font-size: 2vw;
    text-align: center;
    margin-right: 6%;
}

.container2 {
    padding-top: 35%;
}

#interrogacion-naranja {
    position: absolute;
    width: 1.5vw;
    left: 57.3vw;
    top: 10.3vw;
}

.switch-rojo {
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
    width: 8vw;
    height: 5vw;
    background-color: #FF6541;
    border-radius: 100px;
    margin-left: 6vw;
    border: 2px solid black;
    border-bottom:5px solid black;
    border-right:5px solid black;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 1);
    padding-top: 2.5%;
    padding-left: 2%
}

.caja-circulo {
    width: 48%;
    display: flex;
    justify-content: start;
    align-items: center;
    border: 0.25vw solid #FFF35F;
    border-radius: 100%;
    outline: 1px solid black;

}

.carita-blanca {
    width: 100%;
    animation: spin 6s linear infinite;
    border: 1px solid black;
    border-radius: 100%;
}

.container3 {
    padding-top: 35%;
}

.container3 .gulfs {
    color: #1357EB;
    font-size: 2vw;
    text-align: center;
}

#interrogante-azul2 {
    position: absolute;
    width: 1.5vw;
    right: 21.5vw;
    top: 10.4vw;
}

.switch-rosado {
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
    width: 8vw;
    height: 5vw;
    background-color: #F1B4D6;
    border-radius: 100px;
    margin-left: 6vw;
    border: 2px solid black;
    border-bottom:5px solid black;
    border-right:5px solid black;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 1);
    padding-top: 2.5%;
    padding-left: 2%
}

.switch-rosado .caja-circulo {
    width: 48%;
    display: flex;
    justify-content: start;
    align-items: center;
    border: 0.25vw solid #1357EB;
    border-radius: 100%;
    outline: 1px solid black;

}

.carita-blanca {
    width: 100%;
    animation: spin 6s linear infinite;
    border: 1px solid black;
    border-radius: 100%;
}

.selector {
    width: 7vw;
    position: relative;
    left: 5vw;
    animation: spin 6s linear infinite;
    margin-bottom: 1.5vw;
    margin-top: 1vw;
}

.container4 .gulfs {
    color: white;
    font-size: 2.5vw;
}

.container4 {
    text-align: center;
    padding-top: 5vw;
    padding-left: 2vw;
}

#texto-azul {
    color: #0247C2;
}

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

.container6 .gulfs {
    color: #1357EB;
    font-size: 2.5vw;
    line-height: 2.5vw;;
}

#interrogante-oscuro {
    position: absolute;
    width: 1.5vw;
    right: 1vw;
    top: 25.5vw;
}

#interrogante-blanco {
    position: absolute;
    width: 1.5vw;
    right: 1vw;
    top: 9vw;
}

#interrogante-azul {
    position: absolute;
    width: 1.5vw;
    left: 15vw;
    top: 45vw;
}

#interrogante-blanco2 {
    position: absolute;
    width: 1.5vw;
    top: 40.3vw;
    left: 33vw; 
}

.switch-blanco {
    margin-top: 3vw;
    margin-bottom: 3vw;
    background-color: #ffffff;
    width: 15vw;
    border-radius: 100px;
    height: 7vw;
    border: 2px solid black;
    border-bottom:6px solid black;
    border-right:6px solid black;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 1);
}

.circulo-rosado {
    position: absolute;
    left: 8.5vw;
    border-radius: 15px;
    top: 52vw;
    height: 3vw;
    width: 3vw;
    background-color: #F1B4D6;
    border: 2px solid black;
}

.simbolo-negativo {
    width: 2vw;
    fill: #0247C2;
}

.circulo-blanco {
    width: 1.3vw;
    height: 1.3vw;
    position: absolute;
    top: 0.55vw;
    left: 0.65vw;
    background-color: white;
    border-radius:100px;
    border: 2px solid black;
}

.simbolo-positivo {
    position: absolute;
    width: 4.5vw;
    left: 11.8vw;
    top: 51.5vw;
}

.simbolo-negativo {
    position: absolute;
    width: 4.5vw;
    left: 3vw;
    top: 51.4vw;
}

.container9 {
    padding-left: 3vw;
    padding-top: 3vw;
    padding-right: 15vw;
}

.container9 h1 {
    font-size: 2.5vw;
    line-height: 2.5vw;
}

.container9 p {
    font-family: sans-serif;
    font-weight: 900;
    font-size: 0.9vw;
    margin-top: 0.2vw;
}

.boton-rojo {
    position: absolute;
    right: 7vw;
    top: 58vw;
    height: 7vw;
    width: 7vw;
    background-color: #FF6541;
    border: 2px solid black;
    border-radius: 100%;
    border-bottom: 8px solid black;
    border-right: 8px solid black;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 1);
    overflow: hidden;
    text-align: center;
}

#email-input {
    background-color: #F1B4D6;
    border: none;
    border-bottom: 6px solid #FF6541;
    border-radius: 1%;
    color: #FF6541;
    font-weight: 900;
    margin-top: 2vw;
    width: 19vw;
    font-size: 1.2vw;

}

#email-input:focus {
    outline: none;
}

/* 
--------------------------------------------------------------------------
SECCION CONTACTO
--------------------------------------------------------------------------
*/

#seccion-contacto {
    height: 65vw;
}

.pareja-caricatura {
    top: 310vw;
    left: 12vw;
    width:30vw;
}

.copas {
    top: 337vw;
    left: 37.5vw;
    width: 10vw;   
    animation: tilt 2s linear infinite;   
}

.serpentina-azul {
    top: 330vw;
    left: 38vw;
    width: 6vw;
    z-index: 10;
    animation: tilt 2s linear infinite;  
     
}

.anillos3 {
    top: 322.5vw;
    left: 38vw;
    width: 10vw;
    animation: tilt 2s linear infinite;  
}

.trio-estrellas {
    top: 318vw;
    left: 40.8vw;
    width: 6vw;   
}

.mano-disco {
    top: 305vw;
    left: 38vw;
    width: 10vw;  
    animation: tilt 2s linear infinite;  
}

.yay {
    top: 302vw;
    left: 24vw;
    width: 12vw; 
    animation: pressButton 2s linear infinite;      
}

.consola-sonido {
    top: 304vw;
    left: 8vw;
    width: 16vw;
    z-index: 0;  
    animation: pressButton 2s linear infinite;      
}

.corazon {
    top: 322vw;
    left: 3.5vw;
    width: 8vw;
    animation: pressButton 1.8s ease infinite;
}

.rayo2 {
    top: 332vw;
    left: 9vw;
    width: 8vw; 
    animation: tilt 2s linear infinite;     
}

.serpentina-roja {
    top: 338vw;
    left: 11.6vw;
    width: 16vw;  
    animation: tilt 2s linear infinite;  
}

.carita-feliz-azul {
    top: 341vw;
    left: 11vw;
    width: 8vw;
    animation: spin 7s linear infinite;
}

#seccion-contacto h1.gulfs {
    position: absolute;
    top: 310vw;
    left: 56vw;
    font-size: 5.8vw;
    line-height: 4.5vw; 
    color: #1357EB;
    padding-right: 9.8vw;

}

#seccion-contacto p.serif {
    position: absolute;
    top: 320vw;
    left: 56vw;
    font-size: 0.9vw;
    line-height: 2vw; 
    color: black;
    font-family: Anybody;
    padding-right: 9.8vw;
    font-weight: 800;

}

.linea-naranja {
    position: absolute;
    width: 38vw;
    height: 0.5vw;
    top: 330vw;
    left: 56vw;
    background-color: #FF6541;
}

.circulo-naranja {
    --original-right: 41.5vw;
    position: absolute;
    border-radius: 100%;
    width: 2vw;
    height: 2vw;
    background-color: #FF6541;
    right: 41.5vw;
    top: 326vw;
}

.circulo-rosa {
    --original-right: 0.65vw;
    position: absolute;
    border-radius: 20%;
    width: 0.7vw;
    height: 0.6vw;
    background-color: #F1B4D6;
    right: 0.65vw;
    top: 0.6vw;
}

.circulo-naranja1 {
    right: calc(var(--original-right) - 2.2vw)
}

#slash1 {
    --original-right-slash: 37.8vw;
    position: absolute;
    width: 1.5vw;
    height: 2vw;
    right: 37.8vw;
    top: 326vw; 
}

.circulo-naranja2 {
    right: calc(var(--original-right) - 5.7vw)
}

.circulo-naranja3 {
    right: calc(var(--original-right) - 8vw)
}

.slash2 {
    position: absolute;
    width: 1.5vw;
    height: 2vw;
    right: 32vw;
    top: 326vw; 
}

.circulo-naranja4 {
    right: calc(var(--original-right) - 11.5vw)
}

.circulo-naranja5 {
    right: calc(var(--original-right) - 13.8vw)
}

.circulo-naranja6 {
    right: calc(var(--original-right) - 16.1vw)
}

.circulo-naranja7 {
    right: calc(var(--original-right) - 18.4vw)
}

#flecha-izq {
    position: absolute;
    width: 2.5vw;
    right: 15vw;
    top: 325.5vw;     
}

#flecha-der {
    position: absolute;
    width: 2.5vw;
    right: 9.3vw;
    top: 325.5vw; 
    z-index: 10;   
}

.circulo-flecha-der {
    position: absolute;
    width: 5vw;
    height: 5vw;
    border-radius: 100%;
    right: 8vw;
    top: 324.7vw;   
    background-color: #FF6541;   
}

.caja-blanca {
    position: absolute;
    height: 5vw;
    width: 43vw;
    background-color: white;
    right: 4vw;
    top: 337.5vw; 
    border: 2px solid black;
    z-index: 10; 
    display: grid;
    grid-template-columns: repeat(9, 1fr); 
}

.caja-negra {
    position: absolute;
    height: 5vw;
    width: 43vw;
    background-color: black;
    right: 4.5vw;
    top: 338vw; 
    border: 2px solid black;
    z-index: 9;  
}

.caja-blanca .any {
    font-size: 0.8vw;
}

.elemento1 {
    grid-column: 1 / 4;
    border-right: 2px solid black;
    padding-top: 1.2vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
}

.elemento1 p.any {
    font-family: Anybody;
    font-weight: 900;
    font-size: 0.8vw;
    line-height: 1vw;
}

.elemento2 {
    grid-column: 4 / 7;
    border-right: 2px solid black;
    padding-top: 1.7vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
}

.elemento2 a.any {
    font-family: Anybody;
    font-weight: 900;
    font-size: 0.8vw;
    line-height: 1vw;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.elemento2 a.any:hover {
    cursor: pointer;
}

.elemento3 {
    grid-column : 7 / 8;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caja-facebook {
    background-color: #9EF3F3;
    height: 70%;
    width: 70%;
    border-radius: 100%;
    border: 2px solid black;
    padding-top: 15%;
    padding-left: 20%;
}

.elemento4 {
    grid-column : 8 / 9;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caja-insta {
    background-color: #F1B4D6;
    height: 70%;
    width: 70%;
    border-radius: 100%;
    border: 2px solid black;
    padding-top: 15%;
    padding-left: 12%;
}

.elemento5 {
    grid-column : 9 / 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caja-telegram {
    background-color: #FFF35F;
    height: 70%;
    width: 70%;
    border-radius: 100%;
    border: 2px solid black;
    padding-top: 15%;
    padding-left: 12%;
}

#icono-facebook {
    width: 50%;
}

#icono-insta,
#icono-telegram {
    width: 75%;
}


/* 
--------------------------------------------------------------------------
MEDIA QUERIES
--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

    #icono-rayas-menu,
    #icono-equis-menu {
        display: block;
    }

    .caja-imagen-derecha,
    .caja-imagen-izquierda,
    .figura-celeste {
        display: none;
    }

    .boton-navegacion {
        position: absolute;
        right: 2%;
        top: 2%;
        border: 2px solid black;
        border-radius: 50%;
        border-right: 4.5px solid black;
        border-bottom: 4.5px solid black;
        background-color: #F1B4D6;
        height: clamp(40px, 100vw, 55px);
        width: clamp(40px, 100vw, 55px);
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5); /* Optional: adds a shadow for depth */
    }

    .boton-navegacion #icono-rayas-menu {
        height: 62%;
    }
    
    .boton-navegacion #icono-equis-menu {
        height: 80%;
    }
    
    #icono-equis-menu {
        display: none;
    }

    #checkbox-menu:checked ~ .boton-navegacion #icono-rayas-menu {
        display: none;
    }
    
    #checkbox-menu:checked ~ .boton-navegacion #icono-equis-menu {
        display: inline;
    }
    
    #checkbox-menu:checked ~ .boton-navegacion {
        filter: brightness(0.87);
    }  

    #checkbox-menu:not(:checked) ~ .menu-navegacion {
        pointer-events: none;
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.5s ease, transform 0.5s ease; 
    }
    
    #checkbox-menu:checked ~ .menu-navegacion {
        pointer-events: auto;   
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .menu-navegacion {
        position: absolute;
        right: clamp(5%, 1vw, 5%);
        top: clamp(70px, 14vw, 80px);
        display: grid;
        height: 4vh;
        width: clamp(50px, 1vw, 80vw);
    }

    .item {
        font-size: clamp(0.2rem, 4vw, 2rem);

    }

    .seccion-inicial {
        height: 105vw;
    }

    .seccion-inicial .titulo-principal {
        top: clamp(44vw, 38vw, 40vw);
    }
    
    .gulfs.titulo-principal span {
        display: block;
        text-align: center;
        height: clamp(8.5vw, 1vw, 10vw);
        font-size: clamp(11vw, 1vw, 15vw);
    }
    
    .seccion-inicial .caja-imagen-central {
        top: clamp(43vw, 37vw, 50vw);
        border-radius: 28vw;
        margin: auto;
    }
    
    #imagen-principal {
        width: 65vw;
        height: 85vw;
    }
    
    .circulo-sonriente {
        left: clamp(50px, 12vw, 100px);
        width: clamp(80px, 25vw, 170px);
        top: clamp(140vw, 1vw, 150vw);
    }
    
    .rayo {
        right: clamp(3vw, 1vw, 4vw);
        top: clamp(75vw, 1vw, 80vw);
        width: clamp(12vw, 10vw, 15vw);
    }
    
    .estrella1 {
        right: clamp(5.5vw, 1vw, 6vw);
        top: clamp(86vw, 1vw, 90vw);
        width: clamp(20px, 3vw, 40px);    
    }
    
    .estrella2 {
        left: clamp(5.5vw, 1vw, 6vw);
        top: clamp(54vw, 1vw, 59vw);
        width: clamp(15px, 1vw, 25px);   
    }
    
    .estrella3 {
        left: clamp(3vw, 1vw, 6vw);
        top: clamp(76vw, 1vw, 89vw);
        width: clamp(30px, 6vw, 40px);    
    }
    
    .figura-celeste {
        left: 25%;
        top: 40.5vw;
        width: clamp(65px, 10vw, 130px); 
        animation: spin 10s linear infinite;
    }

    .boton-chat {
        right: 2vw;
    }

    .boton3,
    .boton4,
    .mensaje-izquierdo,
    .mensaje-derecho {
        display: none;
    }

    .boton1,
    .boton2 {
        top: 170vw;
    }

    .ovalo-blanco,
    #seccion-nosotros .titulo-principal,
    #seccion-nosotros .descripcion,
    #seccion-nosotros .mensaje-inferior,
    .anillos,
    .polvora-roja {
        top: calc(var(--original-top) + 94vw);
    }

    #seccion-nosotros .titulo-principal {
        left: 1vw;
    }
    
    #seccion-nosotros .gulfs.titulo-principal span {
        font-size: clamp(22vw, 11vw, 12rem);
        margin-bottom: 9vw;
    }
    
    #seccion-nosotros .descripcion {
        top: 219vw;
        left: 1vw;
        width: 84vw;
        height: 40vw;
        line-height: 4.5vw;
        font-size: clamp(3vw, 1.4vw, 2rem);
    }
    
    #seccion-nosotros .mensaje-inferior {
        font-weight: 400;
        top: 275vw;
        left: 6vw;
        width: 51vw;
        font-size: clamp(3vw, 2.1vw, 2.5rem);
    
    }
    
    .anillos {
        left: 40vw;
        top: 267vw;
        width: 18vw; 
    }
    
    .polvora-roja {
        left: 58vw;
        top: 266vw;
        width: 15vw; 
    }
    
    .ovalo-blanco {
        width: 52vw;
        height: 25vw;
        left: 7vw;
        transform: rotate(-12deg);
    }
    
    .marco-interior,
    .marco-medio,
    .marco-exterior {
        top: calc(var(--original-top) + 202vw);
        left: 12vw;
        width: 80vw;
        height: 91.5vw;
    }

    .marco-medio {
        left:10vw;
        top: calc(var(--original-top) + 203vw)
    }

    .marco-exterior {
        left:8vw;
        top: calc(var(--original-top) + 203.5vw)
    }

    #pareja-confeti {
        width: 80vw;
        height: 90vw;
    }

    #seccion-nosotros {
        height: 285vw;
    }

    .boton-chat {
        z-index: 100;
    }

    /* 
    -----------------------------------------------------------------------------
    SECCIÓN GALERÍA
    -----------------------------------------------------------------------------
    */

    .caja-grid,
    #seccion-galeria .foto-nueve,
    #seccion-galeria .foto-cinco {
        display: none;
    }

    #seccion-galeria .area-blanca {
        height: 96vw;
    }

    #seccion-galeria {
        height: 140vw;
    }

    #seccion-galeria .imagen4-responsive {
        position: absolute;
        top: 395vw;
        left: -2vw;
        height: 55vw;
        border-radius: 40px;
        border: 2px solid black;
        width: 55vw;
    }

    .imagen5-responsive,
    #imagen-bonus {
        display: block;
    }

    #seccion-galeria .imagen5-responsive {
        position: absolute;
        top: 395vw;
        left: 55vw;
        height: 55vw;
        border-radius: 40px;
        border: 2px solid black;
        width: 45vw;   
    }

    #imagen-chiquita {
        display: block;
        position: absolute;
        top: 452vw;
        left: -4vw;
        height: 70vw;
        border-radius: 30px;
        border: 2px solid black;
        width: 10vw;    
    }

    #mujer-flores {
        display: block;
        position: absolute;
        top: 452vw;
        left: 8vw;
        height: 70vw;
        border-radius: 40px;
        border: 2px solid black;
        width: 52vw;      
    }

    #imagen-bonus {
        position: absolute;
        top: 452vw;
        left: 62vw;
        height: 70vw;
        border-radius: 40px;
        border: 2px solid black;
        width: 38vw; 
    }

    /* 
    ----------------------------------------------
    SECCIÓN PRECIOS
    ----------------------------------------------
    */

    #seccion-precios .caja-grid {
        grid-template-rows: repeat(9, 1fr);
        grid-template-columns: repeat(2, 1fr);
        height: 250vw;
    }

    #seccion-precios {
        height: 250vw;
        border-bottom: 2px solid black;
        background-color: wheat;
    }

    .item-grid {
        padding: 0;
    }

    .container1 {
        grid-area: 1 / 1 / 2 / 3;
        background-color: #F1B4D6;
        padding-top: 5vw;
        padding-left: 5vw;
        padding-right: 48vw;
    }

    .container1 .gulfs {
        font-size: 6vw;
        box-sizing: border-box;
    }

    .container5 {
        grid-area: 2 / 1 / 3 / 3;
        background-color: #F1B4D6;
    }

    .container5 .gulfs {
        position: absolute;
        top: 35vw;
        left: 5vw;
        font-size: 5vw;
    }

    .container5 p.gulfs {
        color: #F1B4D6;
        position: absolute;
        top: 0.4vw;
        left: 1vw;
        font-size: 4vw;
    }

    .container5 .numero {
        position: absolute;
        top: 34vw;
        left: 85vw;
        width: 4vw;
        height: 4vw;
    }

    .tres {
        margin-top: 0.1vw;
        font-size: 3vw;
    }

    .barra-amarilla {
        width: 80vw;
        left: 5vw;
        top: 5vw;
    }

    #disco-azul {
        width: 10vw;
        top: -4vw;
    }

    .container5 .circulo-caracteres {
        position: absolute;
        top: 35vw;
        left: 49vw;
        width: 4vw;
        height: 4vw;
    }

    .container2 {
        grid-area: 3 / 1 / 5 / 2;
        background-color: #FFF35F;
        padding-top: 13.5vw;
    }

    .container2 h2.gulfs {
        font-size: 5vw;
        line-height: 4.5vw;
    }

    .anillos2 {
        position: relative;
        top: 96vw;
        width: 25vw;
        left: 33vw;
    }

    #interrogacion-naranja {
        position: absolute;
        top: 72vw;
        width: 5vw;
        left: 42.5vw;    
    }

    .switch-rojo {
        position: absolute;
        top: 80vw;
        width: 22vw;
        height: 12vw;
        left: 8vw;         
    }

    .caja-circulo {
        position: relative;
        top: -1.5vw;
        border-width: 3.5px;
        outline: 2px solid black;

    }

    .carita-blanca {
        border: 2px solid black;
    }

    .container2 p.gulfs {
        font-size: 6vw;
        line-height: 4.5vw;
        margin-top: 19vw;
        margin-left: 4vw;
    }

    .container3 {
        grid-area: 3 / 2 / 5 / 3;
        background-color: #ffffff;
    }

    .container3 h2.gulfs {
        font-size: 6vw;
        line-height: 5vw;
        margin-top: 13vw;
    }

    #interrogante-azul2 {
        width: 5vw;
        top: 73vw;
        right: 0.8vw;
    }

    .container3 p.gulfs {
        font-size: 6vw;
        margin-top: 17vw; 
        margin-left: 3vw;
    }

    .switch-rosado {
        position: absolute;
        top: 80vw;
        width: 22vw;
        height: 12vw;
        left: 60vw;     
    }

    .container4 {
        grid-area: 5 / 1 / 7 / 2;
        background-color: #1357EB;
    }

    .container4 h2.gulfs {
        font-size: 6.5vw;
        line-height: 7vw;
        margin-top: 7vw;       
    }

    #interrogante-blanco {
        width: 5vw;
        top: 125.6vw;
        left: 41vw;     
    }

    .selector {
        width: 15vw;
        top: 0.5vw;
        left: 18.5vw;
        margin-bottom: 3vw;      
    }

    .container4 p.gulfs {
        font-size: 6vw;
        line-height: 6vw;
    }

    #interrogante-oscuro {
        width: 5vw;
        top: 156.8vw;
        left: 41vw;      
    }

    .container6 {
        grid-area: 5 / 2 / 7 / 3;
        background-color: #FFF35F;
    }

    .container6 h2.gulfs {
        position: absolute;
        top: 119vw;
        font-size: 6.5vw;
        line-height: 6vw;
    }

    #interrogante-azul {
        width: 5vw;
        top: 125vw;
        left: 88vw;      
    }

    .switch-blanco {
        position: absolute;
        top: 132vw;
        width: 30vw;
        height: 14vw;
        left: 62vw;  
    }

    .simbolo-negativo {
        top: 0vw;
        width: 12vw;
        height: 12vw;
        left: -1vw;
    }

    .simbolo-positivo {
        top: 0.8vw;
        width: 12vw;
        height: 12vw;
        left: 16.5vw;
    }

    .circulo-rosado {
        top: 3.5vw;
        width: 8vw;
        height: 5vw;
        left: 10.5vw; 
    }

    .circulo-blanco {
        width: 4vw;
        height: 3vw;
        left: 1.8vw;  
        top: 0.5vw;     
    }

    .container6 p.gulfs {
        margin-top: 38vw;
        font-size: 6vw;
        line-height: 6vw;
        margin-left: 4vw;  
    }

    .container7 {
        position: absolute;
        grid-area: 7 / 1 / 9 / 3;
        background-color: black;
        height: 74vw;
        width: 100vw;
    }

    .container7 h1.gulfs {
        position: absolute;
        font-size: 4vw;
        top: 10.2vw;
        left: 16vw;
    }

    #interrogante-blanco2 {
        position: absolute;
        width: 3.5vw;
        top: 11vw;
        left: 32vw; 
    }

    .container7 p.texto {
        position: absolute;
        font-size: 3.2vw;
        top: 11vw;
        left: 49vw;
    }

    .mapa-usa {
        position: relative;
        top: 17vw;
        width: 80vw;
        left: 12vw;   
    }

    .container8 {
        grid-area: 9 / 1 / 10 / 3;
        background-color: #FF6541;
        position: absolute;
        height: 26vw;
        width: 100%;
        top: 18vw;
    }

    .container8 .total-mensaje {
        position: absolute;
        font-size: 4.2vw;
        top: 4vw;
        left: 8vw;    
    }

    .container8 .precio {
        position: absolute;
        font-size: 12.2vw;
        top: 8vw;
        left: 7vw;    
    }

    .camara {
        position: relative;
        top: 209vw;
        width: 20vw;
        left: 72vw;
    }

    .container9 {
        display: none;
    }
    
    /* 
    ----------------------------------------------
    SECCIÓN CONTACTO
    ----------------------------------------------
    */

    #seccion-contacto {
        height: 210vw;
    }  
    
    .pareja-caricatura {
        top: 820vw;
        width: 50vw;
        left: 25vw;
    }

    .anillos3 {
        top: 838vw;
        width: 16vw;
        left: 68vw;
    }

    .copas {
        top: 865vw;
        width: 16.5vw;
        left: 67.8vw;
    }

    .serpentina-azul {
        top: 852vw;
        width: 10vw;
        left: 67.5vw;   
    }

    .trio-estrellas {
        top: 830vw;
        width: 9vw;
        left: 72vw;    
    }

    .mano-disco {
        top: 814vw;
        width: 14vw;
        left: 68vw;        
    }

    .yay {
        top: 806vw;
        width: 20vw;
        left: 45vw;     
    }

    .consola-sonido {
        top: 808vw;
        width: 30vw;
        left: 14vw;     
    }

    .corazon {
        top: 838vw;
        width: 12vw;
        left: 12vw;    
    }

    .rayo2 {
        top: 855vw;
        width: 12vw;
        left: 20vw;       
    }

    .serpentina-roja {
        top: 864vw;
        width: 26vw;
        left: 26vw;     
    }

    .carita-feliz-azul {
        top: 870vw;
        width: 14vw;
        left: 24vw;    
    }

    #seccion-contacto h1.gulfs {
        top: 896vw;
        font-size: 12vw;
        line-height: 10vw;
        left: 10vw;      
    }

    #seccion-contacto p.serif {
        top: 920vw;
        font-size: 3vw;
        line-height: 5vw;
        left: 10vw;     
    }

    .linea-naranja {
        top: 950vw;
        width: 80vw;
        height: 1vw;
        left: 10vw;       
    }

    .caja-blanca {
        top: 960vw;
        width: 90vw;
        height: 20vw;
        left: 4vw;     
    }

    .caja-negra {
        top: 961vw;
        width: 90vw;
        height: 21vw;
        left: 3vw;      
    }

    .efecto-negro {
        position: absolute;
        display: block;
        background-color: black;
        height: 10vw;
        width: 100%;
        top: 990vw;
    }

    .caja-blanca {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: repeat(6, 1fr);
    }

    .elemento1 {
        grid-area: 1 / 1 / 2 / 7;
        border: none;
        border-bottom: 2px solid black;
        padding-top: 2.5vw;
        padding-left: 3vw;
        padding-right: 60vw;
    }

    .elemento1 p.any {
        font-size: 2vw;
        line-height: 2.5vw;
    }

    .elemento2 {
        grid-area: 2 / 1 / 3 / 4;
        padding-top: 3vw;
        padding-left: 3vw;
    }

    .elemento2 a.any {
        font-size: 2.5vw;
        font-weight: 600;
        line-height: 2.5vw;    
    }

    .boton-chat {
        height: 15vw;
        width: 15vw;
    }

    .boton-chat h1 {
        font-weight: 800;
        font-family: Anybody;
        font-size: 3vw;
        margin: 0;
    }

    .elemento3 {
        grid-area: 2 / 4 / 3 / 5;
    }

    .caja-facebook,
    .caja-insta,
    .caja-telegram {
        width: 60%;
        height: 85%;
    }

    #icono-facebook {
        margin-top: -10%;
        height: 90%;
    }

    .elemento4 {
        grid-area: 2 / 5 / 3 / 6;
    }

    #icono-insta,
    #icono-telegram {
        margin-top: -12%;
    }

    .elemento5 {
        grid-area: 2 / 6 / 3 / 7;
    }
    
    .circulo-flecha-der {
        top: 938vw;
        width: 10vw;
        height: 10vw;
        right: 15vw;     
    }

    #flecha-der {
        top: 940vw;
        width: 10vw;
        height: 6vw;
        right: 15vw; 
    }

    #flecha-izq {
        top: 940vw;
        width: 10vw;
        height: 6vw;
        right: 27vw;     
    }

    .circulo-naranja {
        --left-value: 10vw;
        top: 942vw;
        width: 4.5vw;
        height: 4.5vw;
        left: 10vw;
    }

    .circulo-naranja1 {
        left: calc(var(--left-value) + 5vw)
    }

    #slash1 {
        top: 942vw;
        width: 4.5vw;
        height: 4.5vw;
        left: 19vw;     
    }

    .circulo-naranja2 {
        left: calc(var(--left-value) + 13vw)
    }

    .circulo-naranja3 {
        left: calc(var(--left-value) + 18vw)
    }

    .slash2 {
        top: 942vw;
        width: 4.5vw;
        height: 4.5vw;
        left: 32vw;     
    }

    .circulo-naranja4 {
        left: calc(var(--left-value) + 26vw)        
    }

    .circulo-naranja6 {
        left: calc(var(--left-value) + 31vw)
    }

    .circulo-naranja7 {
        left: calc(var(--left-value) + 36vw)
    }

    .circulo-naranja5 {
        left: calc(var(--left-value) + 41vw)
    }

    .circulo-rosa {
        margin-top: 20%;      
        margin-right: 20%;      
        height: 30%;
        width: 30%;
        border-radius: 100%;
    }

}