/* Icons Styles */
.moreShareInformationIcon,
.wifiIcon,
.webLinkIcon,
.plusIcon,
.ezConnectIcon,
.emailIcon,
.phoneIcon,
.planetEarthUbicationIcon,
.notificationIcon,
.offertIcon,
.navBarIcon,
.heartIcon,
.headphonesIcon,
.graphIcon,
.verifiedAccount,
.arrowIcon,
.iconMoreInformation,
.ezBrandBanner,
.amazonMusicIsotype,
.appleMusicIsotype,
.ezConnectIsotype,
.pwaForAndroid,
.bandCampIsotype,
.deezerIsotype,
.facebookIsotype,
.goFundMeIsotype,
.googleMapsIsotype,
.instagramIsotype,
.pwaForIOS,
.linkedinIsotype,
.messengerIsotype,
.mixcloudIsotype,
.printerestIsotype,
.redditIsotype,
.snapchatIsotype,
.soundcloudIsotype,
.spotifyIsotype,
.telegramIsotype,
.tiktokIsotype,
.treadsIsotype,
.twitchIsotype,
.twitterIsotype,
.vimeoIsotype,
.whatsappIsotype,
.youtubeIsotype,
.iconStar {
  fill: currentColor;
  object-fit: scale-down;
  object-position: center;
}

.icon-bg {
  color: transparent;
}

/* Colores principales */
:root {
    --p1: #5453ed; /* Azul */ 
    --p2: #f25922; /* Naranja */
    --p3: #fff; /* Blanco */
}

/* Colores complementarios */
:root {
    --c1: #a3b1f7; /* Azul claro */
    --c2: #2d3476; /* Azul oscuro */
    --c3: #f2f2f2; /* Gris claro */
    --c4: #333333; /* Gris oscuro */
    --c5: #ffc107; /* Amarillo */
    --c6: #00b2a9; /* Verde azulado */
}

/* Raleway font style */
.raleway-style {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400; /* Example weight: You can change it between 100 to 900 */
    font-style: normal;
}

/* Open Sans font style */
.open-sans-style {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300; /* Example weight: You can change it between 300 to 800 */
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

/* Animation Menu Mobile */
@keyframes slideIn {
    0% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

html {
    font-size: 16px; /* Tamaño de fuente base */
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
    font-size: 1rem; /* Tamaño de fuente base */
    line-height: 1.618; /* Espaciado entre líneas */
    font-weight: normal; /* Peso de la fuente */
    color: var(--c4); /* Gris oscuro */
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", sans-serif;
    line-height: 1;
}

a {
    text-decoration: none;
}

strong {
    font-weight: 800;
}

button {
    cursor: pointer;
    -webkit-transition: -webkit-box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    -webkit-box-shadow: 0px 0px 0px 8px rgba(51, 51, 51, 0.7);
    box-shadow: 0px 0px 0px 8px rgba(51, 51, 51, 0.7);
    box-shadow: rgba(51, 51, 51) 0px 20px 30px -10px;
}

#cookie-consent-popup {
  width: 100vw;
  max-width: 600px; /* Opcional: para limitar el ancho máximo */
  padding: 2rem;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centrar contenido horizontalmente */
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--p3);
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 0px 8px rgba(51, 51, 51, 0.7);
  box-shadow: 0px 0px 0px 8px rgba(51, 51, 51, 0.7);
  box-shadow: rgba(51, 51, 51) 0px 20px 30px -10px;
  z-index: 9999;
}

#cookie-consent-popup p {
  width: 90%;
  text-align: center;
  margin-bottom: 1rem;
}

#cookie-consent-buttons {
  display: flex;
  justify-content: center; /* Centrar los botones horizontalmente */
}

#cookie-consent-popup button {
  padding: .75rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: .75rem;
}

#acceptCookies {
  background-color: var(--p1);
  color: var(--p3);
}

#rejectCookies {
  background-color: var(--c2);
  color: var(--p3);
}


#navbar {
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: transparent;
    transition: background-color 0.3s;
}

#navbar.scrolled {
    background-color: var(--p3); /* Blanco */
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5vw;
    transition: all 0.3s;
}

.navbar-content img {
    height: 40px;
}

.nav-links {
    display: flex;
    gap: 20px;
}

.nav-links a {
    color: var(--p3); /* Blanco */
    text-decoration: none;
    transition: color 0.3s;
}

#navbar.scrolled .nav-links a {
    color: var(--p1); /* Azul */
}

.nav-links a:hover,
.nav-links a:active {
    color: var(--p2); /* Naranja */
    font-weight: 600;
    letter-spacing: 1px;
}

#navbar.scrolled .nav-links a:hover,
#navbar.scrolled .nav-links a:active {
    color: var(--p2); /* Naranja */
    font-weight: 600;
    letter-spacing: 1px;
}

#navbar.scrolled .hamburger span {
    background-color: var(--p1); /* Azul */
}

.nav-buttons {
    display: flex;
    gap: 10px;
}

.nav-buttons button {
    padding: 10px 20px;
    border-radius: 15px;
    display: inline-flex;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.nav-buttons .login {
    background-color: var(--c3); 
    color: var(--c4);   

}

.nav-buttons .signup {
    background-color: var(--p1);
    color: var(--p3);
}

.nav-buttons button:hover,
.nav-buttons button:active {
    background-color: var(--c4);
    color: var(--p3);
    font-weight: 600;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--p3); /* Blanco */
    margin: 4px 0;
    transition: background-color 0.3s, transform 0.3s;
}

.hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(7.5px, 7.5px);
    background-color: var(--p2); /* Naranja */
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(7.5px, -7.5px);
    background-color: var(--p2); /* Naranja */
}

#navbar.scrolled .hamburger span {
    background-color: var(--p1); /* Azul */
}

.menu {
    display: none;
    background-color: transparent;
    flex-direction: column;
    gap: 10px;
    color: var(--p1); /* Azul */
    padding: 5vh 10vw;
    position: absolute;
    top: 60px;
    right: 0;
    width: 250px;
    max-width: 100%;
    transform: translateX(-200%); /* Ajustado para que empiece desde la izquierda */
    transition: transform 0.3s ease-in-out;
    z-index: 998; /* Asegúrate de que esté debajo de la barra de navegación */
}

.menu.open {
    transform: translateX(0);
    background-color: var(--p3);
    text-align: center;
    animation: slideIn 0.3s forwards;
    border-radius: 25% 0;
}

.menu.close {
    animation: slideOut 0.3s forwards;
}

.menu a {
    color: var(--p1); 
    text-decoration: none;
    transition: color 0.3s;
}

.menu a:hover,
.menu a:active {
    color: var(--p2);
    font-weight: 600;
    letter-spacing: 1px;
}

.menu-buttons {
    display: flex;
    gap: 50px;
    margin: 3vh 0;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
}

.menu button {
    padding: 10px 20px;
    border-radius: 15px;
    display: inline-flex;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.menu .login {
    background-color: var(--c3); 
    color: var(--c4);  
}

.menu .signup {
    background-color: var(--p1);
    color: var(--p3);
}

.menu button:hover,
.menu button:active {
    background-color: var(--c4);
    color: var(--p3);
    font-weight: 600;
}

.trust-style-bg {
    background-color: var(--c3);
}

.trust-hero {
    width: 860px;
    height: auto;
    max-width: 90%;
    margin: 15vh auto 0 auto;
    background-color: var(--c6);
    border-radius: 35px;
}

.trust-hero img {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center bottom;
    border-radius: 35px;
}

.trust-and-legal-container {
    width: 1600px;
    max-width: 90%;
    margin: 15vh auto;
}

.trust-center-container {
    width: 1600px;
    max-width: 90%;
    margin: 15vh auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    gap: 20px; /* Añade un espacio entre los divs */
}

.trust-center-img, .trust-center-txt {
    width: 50%;
    height: 90vh;
}

.trust-center-img {
    background-color: var(--c6);
    border-radius: 35px;
    margin: 0;
    padding: 0;
}

.trust-center-txt {
    margin: 0;
    padding: 0;
}

.trust-center-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    border-radius: 35px;
}

.trust-us-and-join-the-beta {
    width: 90%;
    max-width: 800px;
    height: auto;
    margin: 15vh auto;
    display: block;
    text-decoration: none;
    color: var(--p3);
    background-color: var(--p1);
    border-radius: 60px;
    text-align: center;
}

.trust-us-and-join-the-beta:hover,
.trust-us-and-join-the-beta:active {
    background-color: var(--c4);
    cursor: pointer;
}

.trust-us-and-join-the-beta h2 {
  font-size: clamp(1rem, 1vw + 1rem, 3rem);
  line-height: 1.5;
  text-align: center;
  font-weight: 400;
  width: 80%;
  margin: 0 auto;
  padding: 2rem;
}

.trust-us-and-join-the-beta span {
  font-size: clamp(1.5rem, 2vw + 2rem, 4.5rem);
  line-height: 1;
  font-weight: 800;
}

.trust-and-legal-container span,
.trust-center-container span {
  color: var(--p1);
}

.trust-and-legal-container a,
.trust-center-container a {
  color: var(--p2);
}

.trust-and-legal-container a:hover,
.trust-and-legal-container a:active,
.trust-center-container a:hover,
.trust-center-container a:active {
  color: var(--p1);
}

.trust-and-legal-container h1,
.trust-center-container h1 {
  font-size: clamp(28px, 3.15vw + 3.15rem, 85px);
  line-height: .85;
  text-align: center;
  font-weight: 800;
  margin-bottom: 15vh;
}

.trust-and-legal-container h3,
.trust-center-container h3 {
  font-size: clamp(22px, 2vw + 2rem, 48px);
  margin-top: 15vh;
}

.trust-and-legal-container p,
.trust-center-container p {
    margin-top: 3.5vh;
    margin-bottom: 7.5vh;
}

.trust-and-legal-list {
  list-style: none; 
  padding-left: 3rem; 
  margin-top: 3.5vh;
  margin-bottom: 7.5vh;
}

.trust-and-legal-list li {
  margin-bottom: 3.5vh;
  position: relative; 
  padding-left: 30px; 
  font-size: 1rem;
}

.trust-and-legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px; 
  height: 10px; 
  background-color: var(--p1);
  border-radius: 50%;
}

.footer-style-01 {
  background-color: var(--c1);
  height: auto;
  padding-top: 30vh;
}

.footer-container {
  width: 1600px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
}

.ezBrandBanner {
  width: 1600px;
  max-width: 90%;
  margin: 5vh auto;
  color: var(--c4);
}

.footer-menu {
  width: 100%;
  max-width: 1600px;
  border-radius: 30px;
  background-color: var(--p3);
  color: var(--c4);
  margin: 0 auto;
  padding: 0;
  justify-content: center; 
  align-items: center; 
  font-family: "Raleway", sans-serif;
}

.footer-links {
  padding: 5vw;
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 5vw; 
}

.footer-links a {
  color: var(--c4);  
  transition: color 0.3;
}

.footer-links a:hover,
.footer-links a:active {
  color: var(--p1);
  letter-spacing: 1px;
  font-weight: 600;
}

.footer-links h5 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center; 
}

.footer-links ul, li {
  list-style: none;
  text-align: left; 
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 1rem;
}

.footer-links > .links-column {
  flex: 1 1 150px; 
  display: flex;
  flex-direction: column;
  align-items: center; 
  margin-bottom: 2rem;;
}

.footer-cta-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; 
  padding: 5vw;
  box-sizing: border-box; 
}

.footer-cta {
  padding: 5vw;
}

.footer-cta,
.footer-sm-container,
.footer-btn {
  display: flex;
  flex-wrap: wrap; 
}

.footer-cta {
  flex: 1;
  justify-content: flex-start; 
}

.footer-sm-container {
  flex: 1;
  justify-content: flex-end; 
  gap: 1rem; 
}

.footer-btn {
  display: flex;
  gap: 1rem; 
  margin-bottom: 1rem;
  gap: 1rem;
}

.footer-btn-login,
.footer-btn-sign {
  color: var(--c4);
  font-weight: 500;
  padding: 15px 25px;  
  justify-content: center; 
  text-align: center;   
}

.footer-btn-login {
  background-color: var(--c3);
  border-radius: 10px;
}

.footer-btn-login:hover,
.footer-btn-login:active {
    font-weight: 600;
    letter-spacing: 1px;
    background-color: var(--c4);
    color: var(--p3);
}

.footer-btn-sign {
  background-color: var(--p1);
  border-radius: 50px;
    color: var(--p3);
}

.footer-btn-sign:hover,
.footer-btn-sign:active {
    font-weight: 600;
    letter-spacing: 1px;
    background-color: var(--c4);
    color: var(--p3);
}

.footer-sm-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  padding: 5px;
  border-radius: 25%;
  color: var(--c4);
}

.pwaForIOS,
.pwaForAndroid,
.ezConnectIsotype,
.linkedinIsotype,
.twitterIsotype,
.instagramIsotype,
.facebookIsotype,
.tiktokIsotype {
  width: 60%;
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-sm-icon:hover,
.footer-sm-icon:hover div {
    background-color: var(--c1);
}

.copyright {
    margin: 0 auto;
    text-align: center;
    padding: 3rem;
}


@media (max-width: 1023px) {
.nav-links,
.nav-buttons {
     display: none;
}

.hamburger {
      display: flex;
 }

.menu {
      display: flex;
}

.footer-container {
margin: 15vh auto 10vh auto;
}

.footer-style-01 {
  padding-top: 15vh;
}

.footer-links {
  padding: 2vw;
  gap: 0; 
}

.footer-cta {
    flex-direction: column; 
    align-items: center; 
}

.footer-links h5 {
  font-size: 1rem;
}

.footer-links ul, li {
  font-size: .75rem;
}

.footer-btn-login,
.footer-btn-sign {
  font-size: .75rem;  
}

.footer-btn,
.footer-sm-container {
     width: 100%; 
    justify-content: center; 
     text-align: center; 
     margin-top: 5vh;
     margin-bottom: 5vh;
}
}

@media (max-width: 560px) {

.footer-links {
  padding: 0;
  gap: 0; 
}  

.trust-center-container {
    flex-direction: column;
}

.trust-center-img, .trust-center-txt {
     width: 100%;
}  

.trust-center-img {
    height: 50vh;
}

.trust-center-txt {
    height: auto;
    bottom: 15vh;
}
}