* {
    margin: 0;
    padding: 0;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  
  /* Estilos generales */
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #333; /* Fondo gris oscuro */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  /* Contenedor principal (ocupa toda la página) */
  .contenedor {
    width: 100%; /* Ocupa el 100% del ancho */
    height: 100%; /* Ocupa el 100% del alto */
    background-color: transparent; /* Fondo transparente */
    position: relative;
    overflow: auto;
  }
  
  /* Forma superior (gris) */
  .forma-superior {
    width: 100%;
    height: 30%; /* Altura relativa al contenedor */
    background-color: #f69c04; /* Gris más claro */
    border-radius: 50% 50% 0 0;
    position: relative;
  }
  
  /* Forma central (naranja) */
  .forma-central {
    width: 100%;
    background-color: #ff4444;
    position: relative;
    padding: 20px 10px;
  }
  
  /* Forma inferior (roja) */
  .forma-inferior {
    width: 100%;
    height: 30%; /* Altura relativa al contenedor */
    background-color: #f69c04; /* Rojo */
    border-radius: 0 0 50% 50%;
    position: relative;
  }
  


    .copyright {
    position: absolute;
    bottom: 5%;
    width: 100%;
    text-align: center;
    font-size: 20px;
    padding: 10px 0;
  }
  
    /* Tamñode las imagenes */
    
    .ajuste-img{
      width: 100%;
      max-width: 750px;
      height: auto;
      display: block;
      margin: 0 auto 1rem auto;
      border-radius: 1rem;
      object-fit: cover;
    }

    .logo{
      width: 180px;
      max-width: 90%;
      height: auto;
      display: block;
      margin: 2rem auto 1rem auto;
      border-radius: 1rem;
    }


  /* Separador superior */
  .separador {
    background-color: #333;
    width: 100%; /* Ancho completo */
    height: 50px; /* Altura ajustable */
    position: relative;
  }
  
  /* Diseño responsivo para móviles */
  @media (max-width: 768px) {
    .forma-superior,
    .forma-inferior {
      height: 25%; /* Altura reducida en móviles */
    }
  
    
 .forma-central {
    padding: 10px; /* Para que el botón no toque los bordes */
  }
  

    .ajuste-img {
    width: 95%;
    margin: 0 auto 1rem auto;
     }

    .logo {
    max-width: 160px;
  }

  }

  @media (max-width: 480px) {
  .logo {
    max-width: 130px;
  }
}