/* =========================================================
   VARIABLES CSS (Custom Properties)
   Se definen en :root para que estén disponibles en todo el documento
   ========================================================= */
:root{
  --bg:#0b0f14;                 /* Color de fondo general (body) */
  --card:#101826;               /* Fondo de tarjetas / contenedores */
  --text:#e8eef7;               /* Color principal del texto */
  --muted:#a8b3c7;              /* Texto secundario (menos contraste) */
  --accent:#7af5c8;             /* Color de acento (hover, botones, links destacados) */
  --line:rgba(255,255,255,.08); /* Color para bordes y separadores sutiles */
  --danger:#ff6b6b;             /* Color “peligro/activo” (ej: botón en reproducción) */
}

:root{
  --nav-offset: 85px; /* ajustado para logo grande: altura que “ocupa” el header sticky */
}

/* Compensa el sticky header al navegar con #anclas
   - Cuando clickeás un link a #seccion, el navegador hace scroll
   - scroll-padding-top hace que deje “aire” arriba para que el header no tape el título */
html{
  scroll-padding-top: var(--nav-offset); /* deja margen superior al hacer scroll por anclas */
}

/* (Opcional) también vale para cuando haces scroll-margin en secciones
   - Si una sección tiene id, forzás que al quedar arriba no quede oculta bajo el header */
section[id]{
  scroll-margin-top: var(--nav-offset); /* margen superior extra al alinear la sección */
}

/* En pantallas pequeñas el header suele ocupar más alto (logo, burger, panel, etc.) */
@media (max-width: 860px){
  :root{
    --nav-offset: 120px; /* compensación mayor en móvil */
  }
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*{
  box-sizing:border-box; /* incluye padding y border dentro del cálculo del ancho/alto */
}

html,body{
  margin:0;                         /* elimina márgenes por defecto */
  padding:0;                        /* elimina padding por defecto */
  background:var(--bg);             /* aplica fondo global */
  color:var(--text);                /* aplica color de texto global */
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial; /* tipografía base */
}

a{
  color:inherit;          /* los links heredan el color del texto del contenedor */
  text-decoration:none;   /* saca el subrayado por defecto */
}

.container{
  max-width:1120px;       /* ancho máximo del contenido */
  margin:0 auto;          /* centra el contenedor horizontalmente */
  padding:0 16px;         /* padding lateral para que no pegue a los bordes */
}

/* ===================== NAV ===================== */
.navbar{
  position:sticky;                         /* se “pega” al top cuando scrolleás */
  top:0;                                   /* pegado al borde superior */
  z-index:50;                              /* queda por encima de otros elementos */
  background:rgba(11,15,20,.88);           /* fondo semitransparente */
  backdrop-filter: blur(10px);             /* desenfoque de lo que hay detrás (efecto vidrio) */
  border-bottom:1px solid var(--line);     /* línea separadora inferior sutil */
}

.nav-inner{
  display:flex;                            /* layout en fila */
  align-items:center;                      /* centra verticalmente items */
  justify-content:space-between;           /* separa izquierda/centro/derecha */
  padding:0px 0;                           /* alto del nav (0 arriba/abajo) */
  gap:16px;                                /* espacio entre bloques */
}

.brand{
  display:flex;                            /* permite alinear logo y/o texto */
  align-items:center;                      /* centra verticalmente */
}

/* LOGO MUY GRANDE */
.brand img{
  height:120px;          /* tamaño vertical del logo en desktop */
  width:auto;            /* mantiene proporción (no deforma) */
  max-width:420px;       /* evita que se pase de ancho */
  object-fit:contain;    /* asegura que la imagen se vea completa dentro del “box” */
  border-radius:18px;    /* redondea esquinas del logo */
  border:none;           /* elimina borde */
  background:transparent;/* evita fondo detrás de la imagen */
}

/* Menú desktop */
.menu{
  display:flex;          /* links en fila */
  gap:10px;              /* separación entre links */
  flex-wrap:wrap;        /* si no entran, bajan a otra línea */
  align-items:center;    /* centra verticalmente */
  justify-content:center;/* centra el conjunto del menú */
}

.menu a{
  padding:8px 10px;      /* área clickeable */
  border-radius:10px;    /* esquinas redondeadas */
  color:var(--muted);    /* color secundario por defecto */
  font-size:14px;        /* tamaño de fuente del menú */
}

.menu a:hover{
  background:var(--line);/* “pill” sutil al pasar el mouse */
  color:var(--text);     /* sube contraste del texto en hover */
}

/* Redes */
.social{
  display:flex;          /* iconos/links en fila */
  gap:10px;              /* separación */
  align-items:center;    /* centra verticalmente */
}

.social a{
  font-size:14px;        /* tamaño de texto/icono */
  color:var(--muted);    /* tono apagado por defecto */
}

.social a:hover{
  color:var(--accent);   /* cambia a color acento al hover */
}

/* Burger (botón menú móvil) */
.burger{
  display:none;                /* oculto en desktop (se muestra en media query) */
  background:transparent;      /* sin fondo */
  border:1px solid var(--line);/* borde sutil */
  color:var(--text);           /* color del ícono/texto */
  border-radius:12px;          /* bordes redondeados */
  padding:8px 10px;            /* área clickeable */
}

/* Panel móvil */
.mobile-panel{
  display:none;                /* oculto por defecto */
  padding:10px 0 14px;         /* espacio interno arriba y abajo */
  border-top:1px solid var(--line); /* separador arriba del panel */
}

.mobile-panel.open{
  display:block;               /* se muestra cuando agregás la clase .open vía JS */
}

.mobile-panel a{
  display:block;               /* cada link ocupa toda la fila */
  padding:10px;                /* área clickeable grande */
  border-radius:10px;          /* redondeo */
  color:var(--muted);          /* color apagado por defecto */
}

.mobile-panel a:hover{
  background:var(--line);      /* resalta el link */
  color:var(--text);           /* texto más visible */
}

/* ===================== HERO ===================== */
.hero{
  padding:28px 0 10px;         /* espacio arriba y abajo del bloque hero */
}

.badge{
  display:inline-flex;         /* se comporta como inline pero con flex */
  align-items:center;          /* centra verticalmente su contenido */
  gap:8px;                     /* espacio entre icono/texto */
  border:1px solid var(--line);/* borde sutil */
  padding:6px 10px;            /* padding interno */
  border-radius:999px;         /* “pastilla” completamente redondeada */
  color:var(--muted);          /* texto secundario */
  font-size:12px;              /* tamaño pequeño */
}

.hero h1{
  font-size:clamp(18px,4vw,44px); /* tamaño responsive: min 18, ideal 4vw, max 44 */
  margin:10px 0 8px;              /* separación arriba/abajo */
}

.hero p{
  color:var(--muted);         /* texto secundario */
  margin:0 0 18px;            /* margen inferior para separar */
  line-height:1.55;           /* interlineado para legibilidad */
  max-width:70ch;             /* limita ancho (en “caracteres”) para lectura cómoda */
}

/* ===================== LAYOUT ===================== */
.grid{
  display:grid;                               /* usa CSS Grid */
  grid-template-columns:1.2fr .8fr;           /* dos columnas: principal + lateral */
  gap:16px;                                   /* separación entre columnas/filas */
}

.card{
  background:var(--card);                     /* fondo tipo tarjeta */
  border:1px solid var(--line);               /* borde sutil */
  border-radius:18px;                         /* redondeo */
  padding:16px;                               /* padding interno */
}

.section{
  padding:18px 0;                             /* espacio vertical de cada sección */
}

.section-title{
  display:flex;                               /* título en fila (h2 + actions) */
  align-items:center;                         /* centra verticalmente */
  justify-content:space-between;              /* h2 a la izquierda y extras a la derecha */
  gap:10px;                                   /* separación entre elementos */
  margin-bottom:12px;                         /* separa el título del contenido */
}

.section-title h2{
  margin:0;                                   /* saca margen por defecto del h2 */
  font-size:18px;                             /* tamaño del título de sección */
}

.hr{
  border-top:1px solid var(--line);           /* línea horizontal sutil */
  margin:18px 0;                              /* separación vertical alrededor */
}

/* Títulos elegantes: tipografía serif para jerarquía visual */
.section-title h2,
.hero h1,
.now-title{
  font-family:'Playfair Display', serif;      /* fuente con estilo editorial */
  font-weight:600;                            /* grosor medio */
  letter-spacing:.3px;                        /* separación leve entre letras */
}

/* ===================== TRACKS ===================== */
.tracklist{
  display:flex;               /* lista en columna usando flex */
  flex-direction:column;      /* apila verticalmente */
  gap:10px;                   /* separación entre tracks */
}

.track{
  display:flex;               /* fila: meta + botón/acciones */
  justify-content:space-between; /* empuja extremos */
  gap:10px;                   /* espacio entre bloques internos */
  align-items:center;         /* centra verticalmente */
  padding:12px;               /* padding interno */
  border:1px solid var(--line); /* borde sutil */
  border-radius:16px;         /* redondeo */
}

.track .meta{
  display:flex;               /* columna: nombre + subtítulo */
  flex-direction:column;
  gap:2px;                    /* separación entre líneas */
}

.track .meta .name{
  font-weight:500;            /* un poco más marcado */
  font-size:13.5px;           /* tamaño del título */
}

.track .meta .sub{
  color:var(--muted);         /* texto secundario */
  font-size:13px;
}

.track small{
  color:var(--muted);         /* textos auxiliares apagados */
}

.track button{
  background:transparent;     /* sin fondo */
  border:1px solid var(--line); /* borde sutil */
  color:var(--text);          /* texto normal */
  padding:9px 12px;           /* área clickeable */
  border-radius:14px;         /* redondeo */
  cursor:pointer;             /* cursor de botón */
  font-weight:650;            /* destaca el texto del botón */
}

.track button:hover{
  border-color:var(--accent); /* borde acento en hover */
  color:var(--accent);        /* texto acento en hover */
}

/* ===================== PLAYER ===================== */
.audio-box{
  display:flex;               /* contenedor del player en columna */
  flex-direction:column;
  gap:10px;                   /* separación entre cover y audio */
}

.audio-cover{
  width:100%;                 /* ocupa el ancho del contenedor */
  aspect-ratio:1/1;           /* mantiene formato cuadrado */
  object-fit:contain;         /* se ve completa la imagen sin recorte */
  background:rgba(255,255,255,.02); /* fondo muy sutil detrás */
  border-radius:16px;         /* redondeo */
  border:1px solid var(--line); /* borde sutil */
}

audio{
  width:100%;                 /* el control de audio ocupa todo el ancho */
}

/* ===================== VIDEOS ===================== */
.video-grid{
  display:grid;               /* grilla para videos */
  grid-template-columns:1fr 1fr; /* dos columnas */
  gap:16px;                   /* separación */
}

.video-wrap{
  position:relative;          /* base para posicionar el iframe absoluto */
  width:100%;
  aspect-ratio:16/9;          /* mantiene proporción video */
}

iframe{
  position:absolute;          /* se ajusta al contenedor */
  inset:0;                    /* top/right/bottom/left = 0 */
  width:100%;
  height:100%;
  border:0;                   /* sin borde */
  border-radius:16px;         /* redondeo */
}

/* ===================== NEWS ===================== */
.news-item{
  padding:14px;               /* padding interno */
  border:1px solid var(--line); /* borde sutil */
  border-radius:16px;         /* redondeo */
  margin-bottom:12px;         /* separación entre noticias */
}

.news-item h3{
  margin:0 0 6px;             /* separación inferior del título */
}

.news-item .date{
  color:var(--muted);         /* fecha en tono apagado */
  font-size:12px;
  margin-bottom:10px;
}

.news-item p{
  color:var(--muted);         /* cuerpo en tono secundario */
  line-height:1.6;            /* legibilidad */
}

/* ===================== FORM ===================== */
.form{
  display:grid;               /* layout simple de campos en grilla */
  gap:10px;                   /* separación entre inputs */
}

input,textarea{
  width:100%;                 /* ocupan todo el ancho disponible */
  padding:10px 12px;          /* padding interno */
  border-radius:14px;         /* redondeo */
  border:1px solid var(--line); /* borde sutil */
  background:rgba(255,255,255,.02); /* fondo muy leve para diferenciar del fondo */
  color:var(--text);          /* color del texto */
}

textarea{
  min-height:120px;           /* altura mínima para mensajes */
}

.btn{
  background:var(--accent);   /* botón con color de acento */
  color:#063025;              /* texto oscuro (contraste con el acento claro) */
  border:none;                /* sin borde */
  border-radius:14px;         /* redondeo */
  padding:10px 14px;          /* padding interno */
  font-weight:850;            /* botón más “pesado” visualmente */
  cursor:pointer;             /* cursor de botón */
}

.btn:hover{
  filter:brightness(.96);     /* oscurece apenas al hover (feedback visual) */
}

/* Footer */
.footer{
  padding:20px 0;                 /* espacio vertical */
  color:var(--muted);             /* texto secundario */
  font-size:13px;                 /* tamaño más chico */
  border-top:1px solid var(--line); /* separador superior */
  margin-top:24px;                /* separación respecto a lo anterior */
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px){
  .grid{
    grid-template-columns:1fr; /* pasa a una sola columna (apilado) */
  }
  .video-grid{
    grid-template-columns:1fr; /* videos apilados en móvil/tablet */
  }
}

@media (max-width: 860px){
  .menu,.social{
    display:none;               /* oculta menú y redes en móvil */
  }
  .burger{
    display:inline-flex;        /* muestra botón hamburguesa */
  }
  .brand img{
    height:88px;                /* logo grande pero reducido para móvil */
    max-width:300px;            /* limita el ancho máximo */
  }
}

/* Botón play activo
   - Se aplica cuando el botón tiene la clase .is-playing (por JS)
   - Marca visualmente el track que se está reproduciendo */
.track button.is-playing{
  background:rgba(255, 80, 80, .12); /* fondo rojo translúcido */
  border-color:var(--danger);        /* borde rojo */
  color:var(--danger);               /* texto rojo */
}