* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif, roboto;
}

.portada {
    /* Altura total de la pantalla y fondo con imagen opcional */
    height: 100vh;

    /* Flexbox para centrar contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
.fondo {
    height: 100vh;
    width: 90vw;
    margin: 0;
    background-color: antiquewhite;
    background-image: url('images/Banner-Multiproposito-c.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding: 20px;
    animation: alternar 18s ease  infinite;
}
@keyframes alternar {
  0%, 45% {
    background-image: url('images/Banner-Multiproposito-c.jpg');
  }
  40%, 95% {
    background-image: url('images/Banner-invitacion-Multiproposito-c.jpg');
  }
  85%, 100%{
    background-image: url('images/Banner-Multiproposito-c.jpg');
  }
}


.contenido {
    max-width:70vw;
    color:white;
    
    
}

.contenido h1 {
    font-size: clamp(5rem, 5vw, 6rem); /* Tamaño de letra fluido */
    margin-top: 10px;
    margin-bottom:1%;
    text-shadow: 2px 1px 3px rgb(62, 31, 9);
    font-weight: 500;
}
.contenido h2{
  font-size: clamp(3rem, 4vw, 5rem);
  margin-bottom: 5%;
  text-shadow: 2px 1px 3px rgb(62, 31, 9);
  font-weight: lighter;
}
.contenido p {
    font-size: clamp(1.5rem, 2vw, 3rem);
    margin-bottom: 5%;
    color:black;
}
.linea{
  height:2px;
  width: 25vw;
  background-color: #e87b56;
  margin:0 auto;
  margin-bottom: 5%;
  box-shadow: 0 2px 4px #7d6860;
}

.boton {
    display: inline-block;
    padding: 8px 15px;
    background-color: #974328;
    color: white;
    text-decoration: none;
    border-color: rgb(75, 47, 21);
    border-radius: 15px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px #7d6860;
    transition: background-color 0.3s ease;
    transition: transform 0.3s ease;
}
.boton:hover{
  background-color: #45271b;
  color: white;
  border-color: rgb(249, 244, 240);
  transform: scale(1.1);
}



@media only screen and (max-width:1024px){

  .fondo {
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: antiquewhite;
    background-image: url('images/Banner-Multiproposito-c.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding: 0px;
    animation: alternar 18s ease  infinite;
  }
  @keyframes alternar {
    0%, 45% {
      background-image: url('images/Banner-Multiproposito-c.jpg');
    }
    40%, 95% {
      background-image: url('images/Banner-invitacion-Multiproposito-c.jpg');
    }
    85%, 100%{
      background-image: url('images/Banner-Multiproposito-c.jpg');
    }
  }


  .contenido {
      max-width:70vw;
      color:white;
      
      
  }

  .contenido h1 {
    margin-top: 5vh;
    margin-bottom: 1%;
    font-size: clamp(4rem, 5vw, 6rem);
    text-shadow: 2px 1px 3px rgb(62, 31, 9);
    font-weight: 500;
  }
  .contenido h2{
   
    font-size: clamp(3rem, 3.5vw, 4rem);
    margin-bottom: 5%;
    text-shadow: 2px 1px 3px rgb(62, 31, 9);
    font-weight: lighter;
  }
  .contenido p {
    font-size: clamp(1.5rem, 2.5vw, 3.5rem);
    margin-bottom: 10%;
    color:black;
  }
  .linea{
    height:2px;
    width: 50vw;
    background-color: #e87b56;
    margin:0 auto;
    margin-bottom: 4%;
    box-shadow: 0 2px 4px #7d6860;
  }

  .boton {
    display: inline-block;
    padding: 10px 15px;
    background-color: #d0aca0;
    color: white;
    text-decoration: none;
    border-color: rgb(130, 81, 35);
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px #7d6860;
    transition: background-color 0.3s ease;
    transition: transform 0.3s ease;
  }
  .boton:hover{
    background-color: #7d6860;
    color: white;
    border-color: rgb(249, 244, 240);
    transform: scale(1.1);
  }

}

@media only screen and (max-width: 768px){

  .fondo {
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: antiquewhite;
    background-image: url('images/Banner-Multiproposito.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding: 0px;
    animation: alternar 18s ease  infinite;
  }
  @keyframes alternar {
    0%, 45% {
      background-image: url('images/Banner-Multiproposito.jpg');
    }
    40%, 95% {
      background-image: url('images/Banner-invitacion-Multiproposito.jpg');
    }
    85%, 100%{
      background-image: url('images/Banner-Multiproposito.jpg');
    }
  }


  .contenido {
      max-width:80vw;
      color:white;
      
      
  }

  .contenido h1 {
    margin-top: 10vh;
    margin-bottom: 2%;
    font-size: clamp(5rem, 5vw, 6rem);
    text-shadow: 2px 1px 3px rgb(62, 31, 9);
    font-weight: 500;
  }
  .contenido h2{
    font-size: clamp(3rem, 4vw, 5rem);
    margin-bottom: 15%;
    font-size: clamp(4rem, 5vw, 6rem);
    margin-bottom: 5%;
    text-shadow: 2px 1px 3px rgb(62, 31, 9);
    font-weight: lighter;
  }
  .contenido p {
    font-size: clamp(2rem, 3vw, 4rem);
    margin-bottom: 15%;
    text-shadow: 1px 1px 2px rgb(246, 244, 243);
    color:black;
  }
  .linea{
    height:2px;
    width: 50vw;
    background-color: #e87b56;
    margin:0 auto;
    margin-bottom: 15%;
    box-shadow: 0 2px 4px #7d6860;
  }

  .boton {
    display: inline-block;
    padding: 10px 15px;
    background-color: #d0aca0;
    color: white;
    text-decoration: none;
    border-color: rgb(130, 81, 35);
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px #7d6860;
    transition: background-color 0.3s ease;
    transition: transform 0.3s ease;
  }
  .boton:hover{
    background-color: #7d6860;
    color: white;
    border-color: rgb(249, 244, 240);
    transform: scale(1.1);
  }

}

@media only screen and (max-width:540px){
  .contenido h1{
    margin-top: 10vh;
    margin-bottom: 1%;
    font-size: clamp(3rem, 3vw, 4rem);
  }
  .contenido h2{
    font-size: clamp(2.5rem, 3.5vw, 4rem);
    margin-bottom: 5%;
  }
  .contenido p{
    font-size: clamp(2rem, 2vw, 3rem);
    margin-bottom: 10%;
  }
  .linea{
    margin-bottom: 10%;
  }
  .boton{
    font-size: 1.5rem;
  }

}