body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #555;
  text-align: center;
}

/* --- menu --- */
.menu {
  background-color: #000;
  padding: 1vw 3vw;
}

.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.menu-izquierda .nombre {
  color: white;
  font-weight: bold;
  font-size: 1.3vw;
  letter-spacing: 0.1vw;
}

.menu-derecha {
  display: flex;
  gap: 2vw;
  flex-wrap: wrap;
}

/* --- botones menu igual --- */
.btn-menu {
  background-color: white;
  color: black;
  border-radius: 2vw;         
  text-transform: uppercase;
  letter-spacing: 0.1vw;
  font-size: 1.1vw;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-decoration: none;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 15vw;     
  height: 3.5vw;   
  text-align: center;
}

.btn-menu:hover {
  background-color: #ff77a8;
  color: white;
}

/* --- botones --- */
.btn-custom {
  background-color: #000;
  color: white;
  border-radius: 2vw;         
  text-transform: uppercase;
  letter-spacing: 0.1vw;
  font-size: 1.1vw;
  transition: background-color 0.3s ease;
  text-decoration: none;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 15vw;     
  height: 3.5vw;   
  text-align: center;
}

.btn-custom:hover {
  background-color: #444;
  color: white;
}

/* --- encabezado --- */
header {
  background-color: #000;
  color: white;
  padding: 3vw 0;
}

h1 {
  margin: 1vw 0 0 0;
  font-size: 4vw;
}

.text-acento {
  color: #ff77a8;
  margin: 1vw 0 2vw 0;
  font-size: 2vw;
}

/* --- Foto --- */
.foto-perfil {
  max-width: 20vw;
  border-radius: 1vw;
  margin-top: 3vw;
}

/* --- desc --- */
.descripcion {
  max-width: 60vw;
  font-size: 1.2vw;
  color: #555;
  margin: 2vw auto;
  line-height: 1.6;
}

/* --- buttons flexibles --- */
.botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vw;
  margin-top: 2vw;
}

/* --- copyright --- */
footer {
  font-size: 1vw;
  color: #999;
  margin-top: 4vw;
  padding-bottom: 2vw;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .menu-container {
    flex-direction: column;
    align-items: center;
  }

  .menu-derecha {
    justify-content: center;
    margin-top: 1.5vw;
  }

  .menu-izquierda .nombre {
    font-size: 3.5vw;
  }

  .btn-menu, .btn-custom {  /* Ambos botones iguales en móvil */
    font-size: 3vw;
    width: 40vw;      
    height: 10vw;     
    border-radius: 5vw; 
  }

  h1 {
    font-size: 6vw;
  }

  .text-acento {
    font-size: 3.5vw;
  }

  .foto-perfil {
    max-width: 50vw;
  }

  .descripcion {
    font-size: 3vw;
    max-width: 85vw;
  }

  footer {
    font-size: 2.5vw;
  }
}