@font-face {
  font-family: 'Montserrat';
  src: url('/es/fonts/Montserrat/static/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}




body, html {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    /*background: url('/es/img/3x/fondo-mapa-de-proyectos@3x.png') no-repeat center center fixed;   */
    background-size: auto;
    background-color: white;
    height: 100vh;
    overflow: hidden; /* 🔒 esto previene scroll si todo está contenido correctamente */
  }
  
  
  /* === RESPONSIVE === */

@media only screen { } /* Define mobile styles */
@media only screen and (max-width: 575px) {
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
    }
  
    .main-container {
      display: flex;
      flex-direction: column;
      justify-content: center; /* 🔥 centra verticalmente */
      align-items: center;
      height: 100vh;
      box-sizing: border-box;
    }
    
  
    .info-container {
      position: static;
      text-align: center;
      flex-shrink: 1; /* ✅ permite que se achique si hace falta */
      margin-bottom: 50px;
    }
  

    logotipo-portada{
      max-width: 200px;
      height: auto;
      margin-bottom: 10px;
    }  

         .logotipo-portada img {
  max-width: 300px;  /* o 150px, o lo que necesites */
  height: auto;
}

        .info-container h2 {
      margin: 10px 0;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #1c1c46;
    }



    .info-container h3 {
      margin: 10px 0;
      font-size: 1 rem;
      color: #1c1c46;
    }

    .language-buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px; 
    }
    
    .language-button {
      width: 160px;
      text-align: center;
      text-decoration: none;
      position: relative;
    }
    
    .btn-content {
      position: relative;
      width: 100%;
    }
    
    .btn-content img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .btn-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: white;
      pointer-events: none;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* mejora contraste si el fondo es claro */
    }
  
    .map-container {
      position: static;
      text-align: center;
      width: 100%;
      max-height: 40vh; /* ✅ limita el alto para no empujar al resto */
      flex-shrink: 1;
    }
  
    .map-container img {
      width: 60%;
      max-width: 270px;
      margin: 0px auto;
    }
       
                                                                                                            
}

@media only screen and (min-width: 575px) { }
@media only screen and (min-width: 576px) and (max-width: 768px) {
   
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
    }
  
    .main-container {
      display: flex;
      flex-direction: column;
      justify-content: center; /* 🔥 centra verticalmente */
      align-items: center;
      height: 100vh;
      padding: 0 15px;
      box-sizing: border-box;
    }
    
  
    .info-container {
      position: static;
      text-align: center;
      flex-shrink: 1; /* ✅ permite que se achique si hace falta */
    }
  

    logotipo-portada{
      max-width: 200px;
      height: auto;
      margin-bottom: 10px;
    }  

    .info-container h2 {
      margin: 10px 0;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #1c1c46;
    }
    
    

    .info-container h3 {
      margin: 10px 0;
      font-size: 1 rem;
      color: #1c1c46;
    }

          .logotipo-portada img {
  max-width: 300px;  /* o 150px, o lo que necesites */
  height: auto;
}

    .language-buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px; 
    }
    
    .language-button {
      width: 160px;
      text-align: center;
      text-decoration: none;
      position: relative;
    }
    
    .btn-content {
      position: relative;
      width: 100%;
    }
    
    .btn-content img {
      width: 100%;
      height: auto;
      display: block;
    }
    
.btn-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: white;
      pointer-events: none;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* mejora contraste si el fondo es claro */
    }
  
    .map-container {
      position: static;
      text-align: center;
      width: 100%;
      max-height: 40vh; /* ✅ limita el alto para no empujar al resto */
      flex-shrink: 1;
    }
  
    .map-container img {
      width: 60%;
      max-width: 280px;
      margin: 30px auto;
    }
      
  
}

@media only screen and (min-width: 576px) { }
@media only screen and (min-width: 769px) and (max-width: 992px) {
   
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
    }
  
    .main-container {
      display: flex;
      flex-direction: column;
      justify-content: center; /* 🔥 centra verticalmente */
      align-items: center;
      height: 100vh;
      padding: 0 15px;
      box-sizing: border-box;
    }
    
  
    .info-container {
      position: static;
      text-align: center;
      flex-shrink: 1; /* ✅ permite que se achique si hace falta */
    }
  

    logotipo-portada{
      max-width: 200px;
      height: auto;
      margin-bottom: 10px;
    }  

    .info-container h2 {
      margin: 10px 0;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #1c1c46;
    }


    .info-container h3 {
      margin: 10px 0;
      font-size: 1 rem;
      color: #1c1c46;
    }

          .logotipo-portada img {
  max-width: 300px;  /* o 150px, o lo que necesites */
  height: auto;
}

    .language-buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px; 
    }
    
    .language-button {
      width: 160px;
      text-align: center;
      text-decoration: none;
      position: relative;
    }
    
    .btn-content {
      position: relative;
      width: 100%;
    }
    
    .btn-content img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    
    .btn-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: white;
      pointer-events: none;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* mejora contraste si el fondo es claro */
    }
  
    .map-container {
      position: static;
      text-align: center;
      width: 100%;
      max-height: 40vh; /* ✅ limita el alto para no empujar al resto */
      flex-shrink: 1;
    }
  
    .map-container img {
      width: 60%;
      max-width: 280px;
      margin: 30px auto;
    }
      
  
}


@media only screen and (min-width: 992px) { }
@media only screen and (min-width: 993px) and (max-width: 1249px){

  .main-container {
    position: relative;
    width: 100%;
    height: 100vh; /* 💡 clave para evitar scroll vertical */
  }
  
  .map-container {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
  }
  
  .map-container img {
    width: 100%;
    max-width: 400px;
    height: auto;
  }
  
.info-container {
        position: absolute;
        top: 25%;
        left: 70%;
        transform: translateX(-50%);
        text-align: center;
        max-width: 500px;
  }
      
      .info-container h2 {
        margin: 10px 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 17px;
        color: #1c1c46;
      }
      
  
      .info-container h3 {
        margin: 10px 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 15px;
        color: #1c1c46;
      }

      .logotipo-portada img {
  max-width: 300px;  /* o 150px, o lo que necesites */
  height: auto;
}

  
   
      .language-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; 
      }
      
      .language-button {
        width: 160px;
        text-align: center;
        text-decoration: none;
        position: relative;
      }
      
      .btn-content {
        position: relative;
        width: 100%;
      }
      
      .btn-content img {
        width: 100%;
        height: auto;
        display: block;
      }
      
      .btn-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 15px;
        color: white;
        pointer-events: none;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* mejora contraste si el fondo es claro */
      }
}

@media only screen and (min-width: 1249px) { }
@media only screen and (min-width: 1250px) and (max-width: 1599px){

  .main-container {
    position: relative;
    width: 100%;
    height: 100vh; /* 💡 clave para evitar scroll vertical */
  }
  
  .map-container {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
  }
  
  .map-container img {
    width: 100%;
    max-width: 430px;
    height: auto;
  }
  
.info-container {
        position: absolute;
        top: 25%;
        left: 65%;
        transform: translateX(-50%);
        text-align: center;
        max-width: 500px;
  }
      
      .info-container h2 {
        margin: 10px 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 17px;
        color: #1c1c46;
      }
      
  
      .info-container h3 {
        margin: 10px 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 15px;
        color: #1c1c46;
      }

      .logotipo-portada img {
  max-width: 270px;  /* o 150px, o lo que necesites */
  height: auto;
}

  
   
      .language-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; 
      }
      
      .language-button {
        width: 160px;
        text-align: center;
        text-decoration: none;
        position: relative;
      }
      
      .btn-content {
        position: relative;
        width: 100%;
      }
      
      .btn-content img {
        width: 100%;
        height: auto;
        display: block;
      }
      
      .btn-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 15px;
        color: white;
        pointer-events: none;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* mejora contraste si el fondo es claro */
      }
}


@media only screen and (min-width: 1600px) { }
@media only screen and (min-width: 1600px){
  .main-container {
    position: relative;
    width: 100%;
    height: 100vh; /* 💡 clave para evitar scroll vertical */
  }
  
  .map-container {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
  }
  
  .map-container img {
    width: 100%;
    max-width: 550px;
    height: auto;
  }
  
  .info-container {
        position: absolute;
        top: 30%;
        left: 65%;
        transform: translateX(-50%);
        text-align: center;
        max-width: 500px;
  }
      
      .info-container h2 {
        margin: 10px 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 18px;
        color: #1c1c46;
      }
      
  
      .info-container h3 {
        margin: 10px 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 15px;
        color: #1c1c46;
      }

      .logotipo-portada img {
  max-width: 400px;  /* o 150px, o lo que necesites */
  height: auto;

      }
  
   
      .language-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; 
      }
      
      .language-button {
        width: 160px;
        text-align: center;
        text-decoration: none;
        position: relative;
      }
      
      .btn-content {
        position: relative;
        width: 100%;
      }
      
      .btn-content img {
        width: 100%;
        height: auto;
        display: block;
      }
      
      .btn-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 15px;
        color: white;
        pointer-events: none;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* mejora contraste si el fondo es claro */
      }
}
  
  
 /* Entrada */
@keyframes slideUpIn {
    0% {
      opacity: 0;
      transform: translateY(5px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes darkToBrightOnce {
    0% {
      filter: brightness(1);
    }
    33% {
      filter: brightness(1.15);
    }
    66% {
      filter: brightness(0.95);
    }
    100% {
      filter: brightness(1);
    }
  }
  
  /* Brillo suave alternado */
  @keyframes pulseBrightnessAlterno {
    0%, 20% {
      filter: brightness(0.9);
    }
    35%, 65% {
      filter: brightness(1.1); /* brilla medio ciclo */
    }
    80%, 100% {
      filter: brightness(0.9);
    }
  }
  
  
  /* Brillo más fuerte para EN */
  @keyframes pulseBrightnessEn {
    0%, 10% {
      filter: brightness(1);
    }
    15%, 85% {
      filter: brightness(1.6); /* brilla casi todo el ciclo */
    }
    90%, 100% {
      filter: brightness(1);
    }
  }
  
  
  /* Animaciones de entrada general */
  .map-container img,
  .info-container h2,
  .info-container h3,
  .main-container img,
  .language-buttons img {
    animation:
      slideUpIn 2s ease-out 0s 1,
      darkToBrightOnce 2s ease-in-out 0s 1;
  }
  
  /* 🔁 Alternancia comienza justo después de los 2s de carga */
  
  /* Español: arranca brillo a los 2s */
  .btn-es .btn-content img {
    animation:
      slideUpIn 2s ease-out 0s 1,
      pulseBrightnessAlterno 6s ease-in-out 2s infinite;
  }
  
  /* Inglés: empieza 3s más tarde (2s entrada + 1s para alternancia) */
  .btn-en .btn-content img {
    animation:
      slideUpIn 2s ease-out 0s 1,
      pulseBrightnessEn 6s ease-in-out 5s infinite;
  }

  
  .map-container img {
    animation:
      pulseBrightnessEn 15s ease-in-out 15s infinite;
  }

  .main-container img {
    animation:
      pulseBrightnessAlterno 6s ease-in-out 2s infinite;
  }