body {
  background: url("assets/img/darkbg.jpg") no-repeat #0a0d0f;
  margin: 0;
  box-sizing: content-box;    /* keep padding out “above” the viewport */
  min-height: 100vh;          /* ensure body is at least one viewport tall */
  padding-bottom: 20px;      /* now this truly pushes the page longer */
  /* you can drop any old flex rules if you’re not using them */
}


.logo {
    display: block;
    width: 300px;
    margin:0 auto;
    margin-top: 60px;
    text-align:center;
}

.portada {
  display: block;
  width: 100%;       /* fill whatever container you have */
  max-width: 600px;  /* don’t grow past your original design */
  height: auto;      /* keep its aspect ratio */
  margin: 0 auto;    /* center it */
}


  .socials {
    display: flex;
    justify-content: center;   /* center icons horizontally */
    align-items: center;
    gap: 20px;
    margin-top: 60px;
    padding-bottom: 20px;      /* space from bottom edge */
  }
  
  .socials img {
    width: 40px;
    height: auto;
    cursor: pointer;
    opacity: 0.3;
    /* or instead: filter: brightness(0.5); */
    transition: transform 200ms ease, filter 200ms ease;
  }

  .socials img:hover {
    transform: scale(1.5);
    opacity: 1;
    filter: brightness(1.2);
  }
  
  .spotify-widget {
    width: 100%;
    max-width: 1500px;
    margin: 200px auto 40px; /* 50px of gap below the player */
  }
  .spotify-widget iframe {
    width: 100%;
    height: 600px;           /* or whatever you’ve chosen */
    border: none;
    background: transparent; /* makes the iframe element itself transparent */
    opacity: 0.3;            /* make the entire widget a bit see‑through */
    transition: opacity 200ms ease-in-out;
  }
  
  .spotify-widget iframe:hover {
    opacity: 1;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 90%;
    max-width: 1200px;
    margin: 60px auto 20px;   /* 16px above, 200px below */
  }
  
  /* 1:1 square containers */
  .gallery figure {
    margin: 0;
    position: relative;
    aspect-ratio: 1 / 1;   /* forces a perfect square */
    overflow: hidden;
  }
  
  /* fill the square, cropping only what overflows */
  .gallery img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform .2s ease;
  }
  
.gallery figure {
  transition: transform .2s ease; /* animate the container */
  cursor: pointer;                /* indicate it’s interactive */
}
.gallery figure:hover {
  transform: scale(1.05);         /* bump up the whole square */
  z-index: 1;                     /* so it floats above neighbors */
}
  
  
  /* Lightbox */
  .lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .lightbox.hidden {
    display: none;
  }
  
  .lightbox-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 4px;
  }
  
  .lightbox-close {
    position: absolute;
    top: 16px; right: 24px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
  }
  
  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    color: #fff;
    padding: 0 12px;
    cursor: pointer;
    user-select: none;
  }
  
  .lightbox-prev {
    left: 16px;
  }
  
  .lightbox-next {
    right: 16px;
  }
  
  .lightbox-nav:hover {
    color: #ddd;
  }
  
  .video-wrapper {
    width: 63%;
    margin: 60px auto;    /* space above/below */
    /* enforce a 16:9 box: */
    aspect-ratio: 16 / 9;
    position: relative;
  }
  
  .video-wrapper iframe {
    position: absolute;   /* fill the wrapper */
    inset: 0;             /* top/right/bottom/left = 0 */
    width: 100%;
    height: 100%;
    border: none;
  }
  
  .contact-button {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    border: none;               /* remove the old border */
    color: #fff;
    font: bold 1rem Arial, sans‑serif;
    letter-spacing: 0.6rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;      /* keep your rounded corners */
    cursor: pointer;
    outline: none;
    /* make room for the underline */
    position: relative;
  }
  
  .contact-button::after {
    content: "";
    position: absolute;
    bottom: 0;                  /* right at the bottom edge */
    left: 50%;                  /* start in the center */
    width: 0;                   /* no line initially */
    height: 2px;                /* thickness of the line */
    background: #fff;
    transition: width 0.8s ease, left 0.8s ease;
  }
  
  .contact-button:hover::after {
    left: 0;                    /* expand from the left edge */
    width: 100%;                /* out to the right edge */
  }
  
  
  






#particles-js canvas {
    display: block;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0
}

/* Modal overlay, hidden by default */
.modal {
  display: none;                    /* hide */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(10,13,15,0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}

/* Show when .open is applied */
.modal.open {
  display: flex;
}

/* Inner form box */
.modal-content {
  background: #15181a;
  border-radius: .5rem;
  max-width: 400px;
  width: 100%;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Close “×” button */
.modal-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Headline */
.modal-content h2 {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  text-align: center;
  color: #fff;
}

/* Form fields */
.contact-form label {
  display: block;
  margin-top: 0.75rem;
  color: #ccc;
  font-size: .9rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-top: .25rem;
  padding: .5rem;
  border: 1px solid #333;
  border-radius: .25rem;
  background: #1e2224;
  color: #fff;
  font-size: .9rem;
  resize: vertical;
}

.contact-form textarea {
  min-height: 100px;
}

/* Submit button */
.contact-submit {
  margin-top: 1rem;
  width: 100%;
  padding: .75rem;
  background: #fff;
  color: #0a0d0f;
  border: none;
  border-radius: .25rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 200ms;
}

.contact-submit:hover {
  background: #e2e2e2;
}

/* Responsive tweaks */
@media (max-width: 620px) {
  .modal-content {
    padding: 1rem;
  }
}



@media (max-width: 620px) {
  body {
    /* you already have these… */
    justify-content: flex-start;
    padding-bottom: 200px;
  }

  /* 1) Logo: shrink it and pin it to the left with a little top padding */
  .logo {
    width: 150px;          /* smaller on phones */
    margin: 20px 0 0 16px; /* top / right / bottom / left */
    text-align: left;
  }

  /* 2) Portada: full‑width but with a bit of vertical breathing room */
  .portada {
    width: 90%;               /* fill most of the screen */
    max-width: 480px;         /* don’t exceed this */
    margin: 16px auto 32px;   /* top / auto center / bottom */
    display: block;
  }

  /* 3) Social icons: keep them in a row, centered, with its own margin */
  .socials {
    display: flex;
    flex-direction: row;      /* horizontal icons */
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 10px auto 10px;   /* top / auto center / bottom */
  }

  .socials img {
    width: 32px;              /* maybe a bit smaller */
  }

 /* 4) Spotify widget right under socials */
 .spotify-widget {
  width: 90%;
  max-width: 480px;
  margin: 0 auto 0px;    /* 40px under the widget for spacing */
}
.spotify-widget iframe {
  width: 100%;
  height: 550px;           /* shrink for mobile */
}

.contact-button {
  font-size: 0.5rem;       /* smaller text */
  padding: 0.3rem 0.6rem;  /* tighter padding */
  bottom: 15px;            /* pull it up a tiny bit */
}
}

/* CONTACT MODAL */
#contact-modal {
  display: none !important;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(10,13,15,0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
#contact-modal.open {
  display: flex !important;
}
.modal-content {
  background: #15181a;
  border-radius: .5rem;
  max-width: 400px; width: 90%;
  padding: 1.5rem;
  position: relative;
}
.modal-close {
  position: absolute;
  top: .5rem; right: .5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
}