body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #3cb4ac;
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.header {
  height: 15vh;           /* 10% de la altura de la ventana */
  width: 100%;
  background-image: url('images/fondo.jpg'); /* Pon la extensión correcta, ej: fondo.jpg o fondo.webp */
  background-size: cover;   /* Ajusta la imagen al tamaño del div */
  background-position: center;
  background-repeat: no-repeat;
}

.cuerpo {
    height: 85vh;
    width: 100%;
    /*background-color: pink;*/
}

.boton-moderno {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #3cb4ac;             /* color texto */
  background: white;
  border: 2px solid #3cb4ac;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(60, 180, 172, 0.3);
  user-select: none;
  font-family: 'Arial', sans-serif;
}

.boton-moderno:hover {
  background-color: #3cb4ac;
  color: white;
  box-shadow: 0 8px 15px rgba(60, 180, 172, 0.5);
  transform: translateY(-3px);
}

.boton-moderno:active {
  box-shadow: 0 4px 6px rgba(60, 180, 172, 0.2);
  transform: translateY(-1px);
}