/*
  La Nasa Musical — styles.css (homepage)
  Diseño moderno y coherente con el resto del sitio.

  Principios:
  - Sistema de diseño con variables: colores, tipografías, espaciados.
  - Componentes reutilizables: botones, cards, contenedores, navegación, formularios.
  - Responsivo: mobile‑first con breakpoints 768px y 1024px.
  - Rendimiento: selectores simples, transiciones con transform/opacity, Grid/Flexbox.
*/

/* ========== Design Tokens ========== */
:root {
  /* Colores base (coherentes con responsive.css/piano.css) */
  --color-bg: #0b1020;                 /* fondo oscuro principal */
  --color-bg-soft: #111827;            /* variantes más suaves */
  --color-surface: rgba(0, 0, 0, 0.38);/* glass suave */
  --color-border: rgba(255, 255, 255, 0.35);
  --color-text: #eaf4ff;               /* texto claro */
  --color-muted: #c8d2de;              /* texto secundario */
  --accent-primary: #2ec4b6;           /* teal como acento */
  --accent-secondary: #6366f1;         /* índigo/morado */
  --accent-danger: #ff2e9f;            /* fucsia */

  /* Espaciado y radios */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 16px;
  /* Altura estimada del footer en móvil (para separar controles) */
  --footer-h: 56px;

  /* Tipografías (coherentes con index.html y otras páginas) */
  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-title: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-brand: "Merienda", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ========== Reset básico ========== */
* { box-sizing: border-box; }
html, body { height: 100%; }


body.homepageBody {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-ui);
  /* Layout: empuja el footer al fondo en páginas con poco contenido */
  min-height: 100vh;
  /* En móviles, usa el viewport dinámico para evitar cortes por barras */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Fondo único: imagen con fallbacks modernos */
  background-image: image-set(
    url("img/cover music1.jpg.avif") type("image/avif") 1x,
    url("img/coverlanasa.png") type("image/png") 1x,
    url("img/lanasa.jpg") type("image/jpeg") 1x
  );
  background-color: transparent; /* sin color sólido de respaldo */
  background-size: cover;
  background-position: 80% 10%;
  background-repeat: no-repeat;
  background-attachment: scroll; /* fondo del body no fijo; usaremos ::before fijo */
  position: relative; /* contexto para pseudo-elemento de fondo */
}

/* Capa de fondo fija para cubrir hasta el footer en todo scroll */
body.homepageBody::before {
  content: "";
  position: fixed;
  inset: 0; /* top/right/bottom/left: 0 */
  pointer-events: none;
  z-index: 0; /* contenido por encima */
  background-image: image-set(
    url("img/cover\ music1.jpg.avif") type("image/avif") 1x,
    url("img/coverlanasa.png") type("image/png") 1x,
    url("img/lanasa.jpg") type("image/jpeg") 1x
  );
  background-size: cover;
  background-position: 80% 10%;
  background-repeat: no-repeat;
}







/* Ajustes específicos para móviles */
@media (max-width: 768px) {
  body.homepageBody {
    /* Encadre móvil: muestra más contenido inferior */
    background-position: 50% 12%;
  }
}

/* Afinar comportamiento a 600px: usar arte vertical para evitar corte visual */

@media (max-width: 600px) {
  body.homepageBody { background-attachment: scroll; }
  body.homepageBody::before {
    background-image: url("img/1vertical.jpeg");
    background-size: cover;
    background-position: 50% 16%;
    background-repeat: no-repeat;
  }
}
  



/* ========== Header / Navegación ========== */
.homepageHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.homepageHeader nav { margin: 0 auto; } /* centra el nav en desktop */

.menu-toggle {
  display: none; /* visible en móvil vía responsive.css */
}

nav ul { list-style: none; display: flex; gap: var(--space-3); padding: 0; margin: 0; justify-content: center; } /* centra botones en desktop */
nav ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 10px;
  width: 130px; /* coherente con responsive.css */
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.4px;
  text-decoration: none;
  color: #ffffff;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  backdrop-filter: saturate(1.2) blur(4px);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
nav ul li a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  background: rgba(46,196,182,0.28);
  border-color: rgba(46,196,182,0.6);
}

/* Eliminados estilos específicos del reloj/fecha y toggle */

/* ========== Hero ========== */
.hero {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  gap: var(--space-4);
  flex: 1 0 auto;
  position: relative; /* asegura que quede por encima del fondo ::before */
  z-index: 1;
}
.hero-content {
  text-align: center;
  display: grid;
  gap: var(--space-4);
}

/* Hero en móviles: sin fondo propio (usa el del body) */
@media (max-width: 768px) {
  .hero { }
}
.laNasaMusical {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(32px, 7vw, 56px);
  letter-spacing: 0.4px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 12px rgba(99,102,241,0.25);
}

.actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
/* Igualar ancho de botones del hero en desktop */
@media (min-width: 1024px) {
  .actions .btn { min-width: 180px; }
}

/* Botones reutilizables */
.btn,
button.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  backdrop-filter: saturate(1.2) blur(4px);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.35); background: rgba(46,196,182,0.28); border-color: rgba(46,196,182,0.6); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(46,196,182,0.65), 0 4px 12px rgba(0,0,0,0.35); }

/* Variantes de botón */
.btn.primary { background: rgba(46,196,182,0.28); border-color: rgba(46,196,182,0.6); }
.btn.secondary { background: rgba(99,102,241,0.25); border-color: rgba(99,102,241,0.55); }
.btn.danger { background: rgba(255,46,159,0.28); border-color: rgba(255,70,165,0.55); }

/* ========== Sección de tarjetas (tracks) ========== */
.tracks-section { width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--space-4) var(--space-3); display: grid; gap: var(--space-3); }
.section-title { text-align: center; margin: 0; }
.title-chip {
  display: inline-block;
  padding: 12px 20px;
  color: #fcfeff;
  font-weight: 800;
  font-family: var(--font-title);
  font-size: 34px;
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.18), rgba(0,0,0,0.32));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  backdrop-filter: saturate(1.1) blur(3px);
}

.tracks-container { width: 100%; padding: var(--space-3); }
.tracks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  align-items: start;
  justify-content: center; /* centra la grilla cuando hay espacio extra */
}

/* Card reutilizable */
.track-card {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  padding: var(--space-2);
  border-radius: var(--radius-1);
  background: rgba(17, 24, 39, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position: relative;
}
.track-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }

.track-thumb {
  width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-1);
}
.track-card h4 {
  /* Tipografía moderna y liviana para no saturar el look */
  font-family: var(--font-ui);
  font-weight: 500; /* más ligero que 700 */
  font-size: 1rem;  /* tamaño moderado y legible */
  line-height: 1.32;
  letter-spacing: 0.15px; /* tracking afinado base */
  color: #eaf4ff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.30); /* sombra más sutil */
  margin: 0;
}
/* Ocultar controles nativos en tarjetas: controlados por la barra flotante */
.track-card audio { display: none; }
/* Ocultar barra interna de progreso si existe */
.playback-progress { display: none; }

/* Feedback visual: tarjeta reproduciendo */
.track-card.playing {
  border-color: rgba(46,196,182,0.65);
  box-shadow: 0 0 0 1px rgba(46,196,182,0.25) inset, 0 10px 26px rgba(0,0,0,0.35);
}
.track-card.playing::after {
  content: 'Reproduciendo';
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(46,196,182,0.85);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* Barra flotante de control de audio: centrada y coherente */
.floating-mini {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 8px auto 14px; /* centrado bajo el título */
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}
.floating-mini .thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.floating-mini .title {
  font-family: var(--font-ui);
  font-weight: 500; /* más liviano */
  font-size: 0.95rem;
  line-height: 1.35; /* base aireado sin exagerar */
  letter-spacing: 0.15px;
  color: #eaf4ff;
}
.floating-mini .pp-btn {
  font-family: var(--font-ui);
  font-size: 14px;
  min-width: 44px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  color: #eaf4ff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 12px rgba(0,0,0,0.28);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.floating-mini .pp-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.32); }
.floating-mini .pp-btn:active { transform: scale(0.98); }

/* ========== Footer ========== */
footer { text-align: center; padding: 10px 12px; background: rgba(0,0,0,0.55); font-family: monospace; font-size: 12px; margin-top: auto; }

/* ========== Formularios (reutilizable) ========== */
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  color: var(--color-text);
  background: rgba(17,24,39,0.55);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-2);
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(46,196,182,0.35);
  border-color: rgba(46,196,182,0.65);
}

/* ========== Responsivo ========== */
/* Móvil (>=320px): ya es mobile‑first, afinamos tamaños */
@media (max-width: 600px) {
  .hero { padding-top: 8px; gap: 12px; }
  .laNasaMusical { font-size: clamp(26px, 7.5vw, 36px); }
  .title-chip {
    font-size: 22px;
    padding: 10px 14px;
    /* Neón y marco también en móviles */
    color: #fcfeff;
    text-shadow: 0 0 5px rgba(99,102,241,0.55), 0 0 10px rgba(46,196,182,0.40);
    box-shadow: 0 0 8px rgba(99,102,241,0.50), 0 0 14px rgba(46,196,182,0.30), 0 6px 18px rgba(0,0,0,0.26);
    border: 1.4px solid rgba(99,102,241,0.42);
    background: linear-gradient(180deg, rgba(99,102,241,0.22), rgba(0,0,0,0.32));
  }
  .tracks-section { padding: 0 12px; }
  .tracks-grid { gap: 6px; }
  /* Afinado tipográfico móvil */
  .track-card h4 { line-height: 1.38; letter-spacing: 0.10px; }
  .floating-mini .title { line-height: 1.40; letter-spacing: 0.10px; }
  /* Igualar tamaño de los dos botones del hero en móvil */
  .actions { justify-content: center; }
  .actions .btn { width: clamp(150px, 42vw, 180px); }
  /* El mosaico 60x60 está gobernado por responsive.css para mantener uniformidad */
}

/* Tablet (>=768px) */
@media (min-width: 768px) {
  .hero { grid-template-columns: 1fr; }
  .laNasaMusical { font-size: clamp(36px, 5vw, 52px); }
  .actions { gap: var(--space-4); }
  /* Sección Mi Música en tablet: centrado y espaciado óptimo */
  .tracks-section { max-width: 960px; margin: 0 auto; gap: var(--space-4); }
  .section-title { text-align: center; }
  .title-chip { font-size: 28px; padding: 10px 18px; }
  .tracks-container { padding: var(--space-3) var(--space-2); }
  .tracks-grid {
    grid-template-columns: repeat(auto-fill, 200px);
    justify-content: center; /* centra las tarjetas en el eje X */
    gap: 12px; /* separaciones moderadas para tablet */
  }
  .track-card {
    width: 200px;
    min-height: 220px;
    box-sizing: border-box;
  }
  .track-thumb { height: 116px; }
  /* Afinado tipográfico tablet */
  .track-card h4 { line-height: 1.34; letter-spacing: 0.12px; }
  .floating-mini .title { line-height: 1.36; letter-spacing: 0.12px; }
  /* Accesibilidad táctil coherente en tablet para controles de audio */
  .floating-mini .pp-btn {
    min-width: 44px;
    min-height: 44px; /* objetivo táctil recomendado */
  }
}

/* Escritorio (>=1024px) */
@media (min-width: 1024px) {
  .tracks-section { max-width: 1180px; margin: 0 auto; }
  /* Tarjetas de tamaño uniforme en desktop */
  .tracks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 220px);
    justify-content: center;
    gap: 12px;
  }
  .track-card {
    width: 220px;
    height: 220px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .track-thumb { height: 120px; }
  /* Tipografía moderna y fina para títulos de tarjetas en desktop */
  .track-card h4 {
    font-family: "Inter", var(--font-ui);
    font-weight: 400; /* aún más liviano en desktop */
    font-size: 0.98rem;
    line-height: 1.30;
    letter-spacing: 0.08px; /* tracking muy fino en desktop */
    text-shadow: 0 1px 2px rgba(0,0,0,0.28);
  }
  /* Afinado tipográfico desktop barra flotante */
  .floating-mini .title { line-height: 1.32; letter-spacing: 0.08px; }
  /* Efecto neón para el chip de “Mi Música” en desktop */
  .title-chip {
    color: #fcfeff;
    text-shadow: 0 0 6px rgba(99,102,241,0.6), 0 0 12px rgba(46,196,182,0.45);
    box-shadow: 0 0 10px rgba(99,102,241,0.55), 0 0 18px rgba(46,196,182,0.35), 0 8px 22px rgba(0,0,0,0.28);
    border: 1.5px solid rgba(99,102,241,0.45);
    background: linear-gradient(180deg, rgba(99,102,241,0.22), rgba(0,0,0,0.32));
  }
}

/* ========== Utilidades ========== */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }