/* ===========================
   FUENTES Y VARIABLES
=========================== */
@font-face {
  font-family: 'Funnel Display';
  src: url('fonts/funnel_display_regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Funnel Display';
  src: url('fonts/funnel_display_medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Funnel Display';
  src: url('fonts/funnel_display_bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --azul: rgb(0,0,255);
  --blanco: #fff;
  --gris: #555;
}

/* ===========================
   RESET
=========================== */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Funnel Display', sans-serif;
  background: var(--blanco);
  color: #000;
  line-height: 1.6;
}

/* ===========================
   HEADER
=========================== */
header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--blanco);
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
header a.logo-link img {
  height: 60px;
  width: auto;
  display: block;
  transition: transform 0.2s ease;
}
header a.logo-link img:hover { transform: scale(1.05); }
nav {
  display:flex; align-items:center;
}
nav a {
  margin-left: 2rem;
  text-decoration: none;
  font-weight: 700;
  color: var(--azul);
  position: relative;
  transition: color 0.3s ease;
}
nav a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--azul);
  transition: width 0.3s ease;
}
nav a:hover { color:#000; }
nav a:hover::after { width:100%; }
.hamburger { display:none; flex-direction:column; cursor:pointer; }
.hamburger div { width:25px; height:3px; background-color:var(--azul); margin:4px 0; border-radius:2px; transition:0.4s; }

/* ===========================
   MAIN
=========================== */
main { padding-top: 100px; max-width:1200px; margin:0 auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2rem;
  padding: 2rem;
  justify-items: center;
}

/* ===========================
   CARDS
=========================== */
.card {
  background: #f9f9f9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  max-width: 320px;
  width: 100%;
  opacity: 0;
  transform: translateY(30px);
}
.card.visible { opacity:1; transform:translateY(0); transition: all 0.6s ease; }
.card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

.card .image-container.square { width:100%; aspect-ratio:1/1; position:relative; overflow:hidden; background:#ddd; }
.card .image-container.rect { width:100%; aspect-ratio:4/3; position:relative; overflow:hidden; background:#ddd; }
.card .image-container img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }

.card .info { padding:0.8rem; display:flex; flex-direction:column; gap:0.2rem; min-height:100px; }

/* ===========================
   TEXTOS
=========================== */
/* Títulos y nombres de artistas (artistas.html) */
.card h3 { 
  font-size: 1.3rem;
  color: var(--azul);
  font-weight: 700;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Nombre de artistas en index.html */
.card.index .artist {
  font-size: 1.05rem;
  color:#000;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Categoría-fecha y géneros */
.card .category-date,
.card .genre {
  font-size: 0.95rem;
  color: var(--gris);
  font-weight:500;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Botones (Escuchar/Ver) */
.card a.ver {
  margin-top:0.5rem;
  text-decoration:none;
  font-weight:700;
  color:var(--azul);
  font-size:0.95rem;
  transition:color 0.2s ease;
  cursor:pointer;
  align-self:flex-start;
}
.card a.ver:hover { color:#000; }

/* ===========================
   FOOTER
=========================== */
footer {
  text-align:center;
  padding:2rem 1rem;
  font-size:0.9rem;
  border-top:1px solid #eee;
  color:#555;
}

/* ===========================
   MODAL
=========================== */
.modal {
  display:none;
  position: fixed;
  z-index:2000;
  left:0; top:0;
  width:100%; height:100%;
  background-color:rgba(0,0,0,0.6);
  justify-content:center;
  align-items:center;
}
.modal-content {
  background-color: var(--azul);
  color: var(--blanco);
  padding:2rem;
  border-radius:12px;
  max-width:400px;
  width:90%;
  text-align:center;
  position:relative;
  box-shadow:0 4px 20px rgba(0,0,0,0.2);
  font-family:'Funnel Display',sans-serif;
}
.modal-content p { font-size:1rem; margin:0; }
.close {
  position:absolute; top:10px; right:15px;
  color:var(--blanco); font-size:1.5rem;
  font-weight:700; cursor:pointer;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width:768px){
  nav{ display:none; flex-direction:column; position:absolute; top:70px; right:0; background:var(--blanco); width:220px; padding:1rem; box-shadow:0 4px 20px rgba(0,0,0,0.1);}
  nav.active{display:flex;}
  .hamburger{display:flex;}
  nav a{margin:1rem 0;}
}