@font-face {
  font-family: "BNMainz";
  src: url("media/BNMainz.woff2") format("woff2"),
       url("media/BNMainz.woff") format("woff"),
       url("media/BNMainz.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --text-color: #f8f7f4;
  --overlay: rgba(0,0,0,0.45);
}

html, body{
  height:100%;
  margin:0;
  font-family: "BNMainz", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-color);
  /* sombra SIN difuminado, desplazada a la derecha y abajo */
  text-shadow: 3px 2px 0 rgba(0,0,0,0.65);
}

body{
  background-image: url("media/fondo3.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* mantener centrado verticalmente, pero alineado a la izquierda */
  display: flex;
  align-items: center;        /* centrado vertical */
  justify-content: flex-start;/* alinear a la izquierda */
  min-height: 100vh;

  /* controla la distancia desde el borde izquierdo */
  padding-left: 5%;
  box-sizing: border-box;
}


.page::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.02) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 6px);
  mix-blend-mode: overlay;
  opacity: 0.9;
}

.page::after{
  content: "";
  position: absolute;
  left: -20%;
  top: -60%;
  width: 60%;
  height: 60%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  transform: rotate(-25deg);
  filter: blur(24px);
  opacity: 0.35;
  pointer-events: none;
}
*/

/* versión temporal sin efecto cristal */
.page {
  width: 90%;
  max-width: 900px;
  padding: 2.5rem;
  border-radius: 9999px; /* pill / pastilla */
  background: var(--overlay); /* overlay oscuro simple */
  border: none;
  text-align: center;
  overflow: visible;
  box-shadow: none;

  /* eliminar márgenes automáticos que centran en algunos casos */
  margin: 0;
}

h1{
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: 0.02em;
  text-transform: none;
}

.btn-music{
  display:inline-block;
  background: rgba(255,255,255,0.12);
  color: var(--text-color);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.6rem 1.2rem;
  border-radius: 9999px; /* esquinas muy redondeadas (pill) */
  cursor: pointer;
  font-size: 1rem;
  margin: 1rem 0;
  text-decoration: none;
}

.contact{
  margin-top: 1rem;
  font-size: 1rem;
  word-break: break-word;
}

a.mail {
  color: #f8f7f4;
  text-decoration: none; /* quitar la línea/subrayado */

  /* mantener la text-shadow definida en html, body (no la sobrescribimos) */
  padding-bottom: 2px; /* opcional: pequeña separación visual */
  -webkit-font-smoothing: antialiased;
}

/* Ajustes específicos para pantallas pequeñas (móvil) */
@media (max-width: 600px) {
  .mail {
    padding-bottom: 3px;
    /* nada que elimine la sombra ni añada bordes */
  }
}

@media (prefers-reduced-motion: no-preference){
  .btn-music:hover{ transform: translateY(-2px); transition: transform .18s ease; }
}

/* Override del fondo sólo para la página de music */
body.music-page {
  background-image: url("media/fondo2.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* sobreescribe el layout global para esta página */
  display: flex;
  align-items: flex-start;   /* arriba */
  justify-content: flex-start;/* izquierda */
  padding-left: 5%;          /* separación desde el borde izquierdo */
  padding-top: 1.5rem;       /* separación desde el borde superior */
  min-height: 100vh;
  box-sizing: border-box;
}