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


  /* Estilos generales */
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #333333; /* 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;
  }
  
  /* Separador superior */
  .separador {
    background-color: #333;
    width: 100%; /* Ancho completo */
    height: 50px; /* Altura ajustable */
    position: relative;
  }

  .config-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;
  }


    .boton {
      display: inline-block;
      padding: 10px 20px;
      background-color: #f69c04; /* Azul */
      color: rgb(7, 0, 0);
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.3s ease;
      text-decoration: none;
}

    .boton:hover {
      background-color: #0056b3; /* Azul más oscuro */
    }

    .boton:active {
      background-color: #004494; /* Más oscuro aún al hacer clic */
    }

  
  /* 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 */
  }
  
  .config-img {
    width: 95%;
    margin: 0 auto 1rem auto;
  }


    .boton {
      width: 90%;
      margin: 0 auto;
      font-size: 14px;
      padding: 10px;
      display: block;
      text-align: center;
    }
    .logo {
    max-width: 160px;
  }

  }

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