:root{
    --body-cont-general-boxshadow:#474545;
    --text-color:#fff;
    --btn-color-1:#fafac3;
    --btn-color-2:#fbf7f714;
    --foter-background: #ffffff26;
    --foter-background-container:#fff0eb00;
    --foter-background-cont:#ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Georgia', serif;
  }
  
  body {
    min-height: 200vh;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("img/center.png");

    color: var(--text-color);
    text-shadow: 2px 2px 2px #342f2fe0;
  }

  .body-cont-general{
    max-width: 500px;
    box-shadow: 5px 5px 10px var(--body-cont-general-boxshadow);
    margin: 0 auto;
  }
  
  /* Background images */
  .bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -3;
  }
  
  .bg-image {
    position: absolute;
    top: 0;
    height: 100%;
    width: 35%;
    background-size: cover;
    background-position: center;
    transition: all 0.2s ease-out;
   
  }
  
  .bg-image.left {
    left: 0;
    background-image: url("img/left.png");
    z-index: -1;
  }
  
  .bg-image.right {
    right: 0;
    background-image: url("img/right.png");
    z-index: -2;
  }

    /* PRELOADER */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--crema);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* Contenido */
.loader {
  text-align: center;
  color: var(--gris);
  font-family: 'Poppins', sans-serif;
}

/* Spinner animado */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ddd;
  border-top: 5px solid var(--dorado);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

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

  /* Oculta la invitación al inicio */
#mainContent {
  opacity: 0;
  transition: opacity 1.2s ease;
}

  
  /* Content */
  .content {
    width: 100%;
    padding: 5rem 2rem;
  }
  
  .hero {
    text-align: center;
    margin-bottom: 6rem;
  }
  
  .hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  #countdown {
    font-size: 1.2rem;
    letter-spacing: 2px;
  }
  
  .phrase {
    max-width: 600px;
    margin: 0 auto 6rem;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.6;
  }
  
  .locations {
    display: flex;
    justify-content: center;
    gap: 3rem;
    text-align: center;
    flex-wrap: wrap;
  }
  
  .location h2 {
    margin-bottom: 0.5rem;
  }
  
  .icono {
    width: 30vw;
    height: 30vw;

  }

  .btn {
    text-decoration: none;
    
    color: var(--text-color);
    text-shadow: 2px 2px 2px #342f2fe0;

    padding: 2px 14px;
  
    border-radius: 50px;
    border: 2px solid var(--text-color);
    background: linear-gradient( var(--btn-color-1),var(var(--btn-color-2)));
  }

  /* music */

  #soundToggle {
    position: fixed;
    top: 24px;
    right: 0px;
  
    width: 48px;
    height: 48px;
  
    border-radius: 10%;
    border: none;
  
    background: rgba(254, 249, 249, 0.207);
    backdrop-filter: blur(6px);
  
    color: #fff;
    font-size: 18px;
  
    cursor: pointer;
  
    z-index: 9999;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    transition: transform 0.2s ease, background 0.2s ease;
  }
  
  /* Music boton Hover desktop */
  #soundToggle:hover {
    transform: scale(1.05);
    background: rgba(0, 0, 0, 0.7);
  }
  
  /* Music boton Ajuste para iPhone con barra inferior */
  @supports (padding: env(safe-area-inset-bottom)) {
    #soundToggle {
      bottom: calc(24px + env(safe-area-inset-bottom));
    }
  }
  

  /* footer */

  .foter {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    
    font-size: 0.5rem;
    width: 90vw;
    height: fit-content;
    position: relative;

    background-color: var(--foter-background-container);

  }

  .foter-row {
    
    border: 2px solid var(--foter-background-cont);
    border-radius: 50px;

    margin: 0px 10px;
    padding: 0px 20px;
    gap:1px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background-color: var(--foter-background);
  }

  .foter-col {
    margin: 0px 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap:0px;
    align-items: center;
    justify-content: center;
    
  }

  .foter-mchic {
    width: 8vw;
    height: auto;
  } 

  .foter-ci {
    width: 5vw;
    height: auto;
  }

  .foter-whats {
    width: 4vw;
    height: auto;
  }