/* =============== */ /* Separador visual en comentarios */
/* Ghotic / SHE */ /* Título/tema del stylesheet */
/* =============== */ /* Separador visual en comentarios */

:root{ /* Selector raíz: aquí se declaran variables CSS globales */
  --bg: #06080b; /* Variable: color de fondo base (muy oscuro) */
  --panel: rgba(255,255,255,.04); /* Variable: fondo de panel con blanco muy transparente */
  --panel2: rgba(255,255,255,.06); /* Variable: fondo de panel un poco más visible */
  --line: rgba(255,255,255,.12); /* Variable: color de líneas/bordes sutiles */
  --text: rgba(255,255,255,.92); /* Variable: color principal del texto */
  --muted: rgba(255,255,255,.62); /* Variable: color de texto secundario/atenuado */

  --accent: #21ff6a;     /* verde “máquina” */ /* Variable: color de acento principal (verde neón) */
  --accent2:#ff2bd6;     /* magenta neón */ /* Variable: segundo acento (magenta) */
  --hot: #ff3b30;        /* rojo alerta */ /* Variable: color para estados de alerta */
  --ok: #21ff6a; /* Variable: color para estado OK (verde) */
  --warn: #ffc400; /* Variable: color para advertencias (amarillo) */

  --radius: 18px; /* Variable: radio estándar para esquinas redondeadas */
  --shadow: 0 20px 60px rgba(0,0,0,.45); /* Variable: sombra principal (desplazamiento y blur) */
} /* Cierra el bloque :root */

*{ box-sizing: border-box; } /* Aplica border-box a todo: padding/borde cuentan dentro del tamaño */

html,body{ margin:0; padding:0; background: radial-gradient(1200px 800px at 70% -10%, rgba(255,43,214,.10), transparent 50%), /* Resetea márgenes/padding y define fondo (1er gradiente radial magenta) */
                                     radial-gradient(900px 700px at 10% 10%, rgba(33,255,106,.08), transparent 55%), /* 2º gradiente radial verde para glow ambiental */
                                     var(--bg); /* Capa final del fondo usando la variable --bg */
          color: var(--text); } /* Color global del texto para html/body usando --text */

body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* Define la tipografía del documento con fallbacks */

a{ color: inherit; text-decoration: none; } /* Links heredan color y se quita subrayado */

img{ max-width: 100%; display:block; } /* Imágenes responsivas y en bloque (evita espacios inline) */

.muted{ color: var(--muted); } /* Clase utilitaria para texto atenuado */

/* HEADER */ /* Comentario: sección de estilos del header */
.header{ /* Contenedor principal del header */
  position: sticky; /* Se “pega” al top durante el scroll */
  top:0; /* Posición sticky anclada arriba */
  z-index: 10; /* Capa por encima del resto del contenido */
  width: 100%; /* Ocupa todo el ancho */
  border-bottom: 1px solid var(--line); /* Línea inferior usando color --line */
  background: rgba(6,8,11,.72); /* Fondo semitransparente del header */
  backdrop-filter: blur(10px); /* Desenfoque del contenido detrás (efecto glass) */
} /* Cierra .header */

.header__inner{ /* Contenedor interno para alinear/centrar contenido */
  width: min(1200px, calc(100% - 32px)); /* Máximo 1200px o (100% - 32px) para margen lateral */
  margin: 0 auto; /* Centra horizontalmente */
  padding: 8px 0; /* Padding vertical del header */
  display:flex; /* Layout en flex */
  align-items:center; /* Alinea items verticalmente al centro */
  gap: 18px; /* Espacio entre elementos del header */
  justify-content: space-between; /* Separa marca a la izq y nav a la der */
} /* Cierra .header__inner */

.brand{ display:flex; align-items:center; gap: 8px; min-width: 160px; } /* Marca en flex: alinea logo+texto, gap, y ancho mínimo */
.brand__logo{ width: 15px; height: 15px; } /* Tamaño del contenedor del logo */
.brand__logo svg{ width: 15px; height: 15px; } /* Fuerza tamaño del SVG del logo */
.logoBox{ fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.18); stroke-width: 2; } /* Estilos SVG: relleno tenue, trazo tenue y grosor */
.logoMark{ fill: rgba(255,255,255,.90); } /* Estilos SVG: marca principal casi blanca */

.brand__text{ line-height: 1.05; } /* Interlineado apretado para bloque de texto de marca */
.brand__title{ /* Título principal de la marca */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente “tech” con fallbacks */
  letter-spacing: 0.18em; /* Espaciado entre letras (look futurista) */
  font-weight: 800; /* Grosor fuerte */
  font-size: 18px; /* Tamaño del título */
} /* Cierra .brand__title */
.brand__tagline{ font-size: 12px; color: var(--muted); letter-spacing: .12em; margin-top: 4px; } /* Tagline pequeño, atenuado, tracking y margen */

/* NAV */ /* Comentario: sección de navegación */
.nav{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* Nav en flex, con wrap y alineado a la derecha */
.nav__link{ /* Link del nav */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente “tech” */
  letter-spacing: .14em; /* Tracking */
  font-weight: 600; /* Semibold */
  font-size: 13px; /* Tamaño del texto */
  padding: 10px 10px; /* Área clicable */
  border-radius: 999px; /* Forma píldora */
  border: 1px solid transparent; /* Borde invisible (evita saltos en hover) */
  color: rgba(255,255,255,.86); /* Texto ligeramente atenuado */
} /* Cierra .nav__link */
.nav__link:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); } /* Hover: muestra borde tenue y fondo suave */
.nav__link.is-active{ border-color: rgba(33,255,106,.45); box-shadow: 0 0 0 2px rgba(33,255,106,.12) inset; } /* Activo: borde verde y glow interior */

.nav__icons{ display:flex; gap: 8px; align-items:center; margin-left: 6px; } /* Grupo de iconos: flex, gap, centrado y margen izq */
.ico{ /* Botón/indicador tipo píldora */
  display:flex; align-items:center; gap: 8px; /* Flex: alinea dot + etiqueta con separación */
  padding: 8px 10px; /* Padding */
  border: 1px solid rgba(255,255,255,.14); /* Borde tenue */
  border-radius: 999px; /* Píldora */
  background: rgba(255,255,255,.03); /* Fondo suave */
  transition: transform .15s ease, border-color .15s ease; /* Transiciones para hover */
} /* Cierra .ico */
.ico:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); } /* Hover: levanta 1px y refuerza borde */
.ico__dot{ /* Punto indicador */
  width: 10px; height: 10px; border-radius: 99px; /* Tamaño y forma circular */
  background: linear-gradient(90deg, var(--accent), var(--accent2)); /* Gradiente verde->magenta */
  box-shadow: 0 0 20px rgba(33,255,106,.20); /* Resplandor verdoso */
} /* Cierra .ico__dot */
.ico__label{ /* Texto del icono */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente tech */
  letter-spacing: .16em; /* Tracking */
  font-size: 11px; /* Tamaño pequeño */
  opacity: .9; /* Un poco transparente */
} /* Cierra .ico__label */

/* WRAP + SECTIONS */ /* Comentario: contenedor principal y secciones */
.wrap{ /* Contenedor central */
  width: min(1200px, calc(100% - 32px)); /* Ancho máximo con márgenes laterales */
  margin: 0 auto; /* Centrado */
  padding: 18px 0 60px; /* Padding: arriba 18px, abajo 60px */
} /* Cierra .wrap */

.section{ padding: 26px 0; } /* Padding vertical de cada sección */
.section__head{ margin-bottom: 14px; } /* Separación inferior del encabezado */
.section__title{ /* Título de sección */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente tech */
  letter-spacing: .16em; /* Tracking */
  font-weight: 800; /* Muy bold */
  font-size: 18px; /* Tamaño */
  margin: 0 0 8px; /* Margen inferior */
} /* Cierra .section__title */
.section__desc{ color: var(--muted); margin:0; line-height: 1.6; } /* Descripción: atenuada, sin margen, interlineado */

/* HERO */ /* Comentario: sección hero */
.hero{ padding-top: 18px; } /* Separación superior del hero */
.hero__grid{ /* Grid del hero */
  display:grid; /* Activa grid */
  grid-template-columns: 1.2fr .8fr; /* Dos columnas: izquierda más grande */
  gap: 18px; /* Separación entre columnas */
} /* Cierra .hero__grid */
.hero__title{ /* Título hero */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente */
  letter-spacing: .20em; /* Tracking amplio */
  font-size: clamp(28px, 4vw, 44px); /* Tamaño responsive (min/ideal/max) */
  margin: 4px 0 10px; /* Márgenes */
} /* Cierra .hero__title */
.hero__subtitle{ color: var(--muted); line-height: 1.8; margin: 0 0 14px; max-width: 58ch; } /* Subtítulo: atenuado, legible, ancho máximo por caracteres */
.hero__chips{ display:flex; flex-wrap:wrap; gap: 10px; } /* Contenedor de chips: flex con wrap y gap */
.chip{ /* Chip */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente tech */
  letter-spacing: .14em; /* Tracking */
  font-size: 11px; /* Tamaño */
  border: 1px solid rgba(255,255,255,.14); /* Borde tenue */
  padding: 8px 10px; /* Padding */
  border-radius: 999px; /* Píldora */
  background: rgba(255,255,255,.03); /* Fondo suave */
} /* Cierra .chip */

/* PANEL */ /* Comentario: panel genérico */
.panel{ /* Panel base */
  border: 1px solid rgba(255,255,255,.14); /* Borde tenue */
  border-radius: var(--radius); /* Radio estándar */
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); /* Degradado vertical suave */
  box-shadow: var(--shadow); /* Sombra estándar */
  padding: 14px; /* Padding interno */
} /* Cierra .panel */
.panel--glow{ /* Variante con glow */
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset, var(--shadow); /* Glow interior + sombra */
} /* Cierra .panel--glow */
.panel__title{ /* Título del panel */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente */
  letter-spacing: .18em; /* Tracking */
  font-size: 12px; /* Tamaño */
  color: rgba(255,255,255,.74); /* Color tenue */
  margin-bottom: 12px; /* Separación inferior */
} /* Cierra .panel__title */
.panel__row{ /* Fila del panel */
  display:flex; justify-content: space-between; gap: 16px; /* Flex: extremos y separación */
  padding: 10px 0; /* Padding vertical */
  border-top: 1px dashed rgba(255,255,255,.10); /* Separador punteado */
} /* Cierra .panel__row */
.panel__row:first-of-type{ border-top: none; } /* Primera fila sin borde superior */
.panel__divider{ height: 1px; background: rgba(255,255,255,.10); margin: 12px 0; } /* Divider: línea sólida con margen */
.ok{ color: var(--ok); } /* Clase estado OK */
.warn{ color: var(--warn); } /* Clase estado warning */
.num{ color: rgba(255,255,255,.86); font-variant-numeric: tabular-nums; } /* Números: color y dígitos monoespaciados/tabulares */

/* AUDIO */ /* Comentario: sección de audio */
.audio{ /* Grid del bloque de audio */
  display:grid; /* Layout grid */
  grid-template-columns: 1.2fr .8fr; /* Dos columnas */
  gap: 18px; /* Separación */
  align-items: start; /* Alinea arriba */
} /* Cierra .audio */

.audio__player{ /* Contenedor del reproductor */
  border: 1px solid rgba(255,255,255,.14); /* Borde tenue */
  border-radius: var(--radius); /* Radio */
  background: rgba(255,255,255,.03); /* Fondo suave */
  padding: 14px; /* Padding */
} /* Cierra .audio__player */

.audio__transport{ /* Controles (play, etc.) */
  display:flex; /* Flex */
  gap: 12px; /* Separación */
  align-items:center; /* Centrado vertical */
  flex-wrap: wrap; /* Wrap para pantallas pequeñas */
} /* Cierra .audio__transport */

.btn{ /* Botón genérico */
  border: 1px solid rgba(255,255,255,.14); /* Borde */
  background: rgba(255,255,255,.03); /* Fondo */
  color: rgba(255,255,255,.9); /* Texto */
  border-radius: 14px; /* Esquinas */
  padding: 10px 12px; /* Padding */
  cursor:pointer; /* Cursor de botón */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente tech */
  letter-spacing: .14em; /* Tracking */
  transition: transform .12s ease, border-color .12s ease, background .12s ease; /* Transiciones */
} /* Cierra .btn */
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); } /* Hover: lift y borde más fuerte */

.btn--primary{ /* Variante primaria */
  border-color: rgba(33,255,106,.45); /* Borde verde */
  box-shadow: 0 0 0 2px rgba(33,255,106,.12) inset; /* Glow interior verde */
} /* Cierra .btn--primary */

body.is-playing .btn--primary{ /* Estado global “playing” afecta al primario */
  border-color: rgba(33,255,106,.75); /* Borde más intenso */
  background: rgba(33,255,106,.10); /* Fondo verdoso */
} /* Cierra selector compuesto */

.audio__time{ /* Bloque tiempo + barra */
  display:flex; align-items:center; gap: 10px; /* Flex, centra y separa */
  flex: 1 1 320px; /* Puede crecer/encoger con base 320px */
  min-width: 260px; /* No baja de 260px */
} /* Cierra .audio__time */
.audio__time span{ font-variant-numeric: tabular-nums; color: rgba(255,255,255,.76); font-size: 13px; } /* Texto de tiempo: dígitos tabulares, color tenue, tamaño */
.bar{ flex: 1; } /* La barra ocupa el espacio disponible */
input[type="range"]{ width: 100%; } /* Los sliders ocupan el ancho completo */

.audio__vol{ /* Bloque volumen */
  display:flex; align-items:center; gap: 10px; /* Flex, centrado y separación */
  min-width: 180px; /* Ancho mínimo */
} /* Cierra .audio__vol */
.audio__vol input[type="range"]{ width: 120px; } /* Slider de volumen con ancho fijo */

/* Tracklist */ /* Comentario: lista de canciones */
.tracklist{ /* Contenedor de tracks */
  margin-top: 12px; /* Separación superior */
  display:flex; /* Flex */
  flex-direction: column; /* Columna */
  gap: 8px; /* Separación entre tracks */
} /* Cierra .tracklist */

/* Tracklist: botón completo y su texto */ /* Comentario: estilo de cada track */
.track { /* Botón/elemento track */
  display:flex; /* Flex */
  align-items:center; /* Centrado vertical */
  justify-content: space-between; /* Extremos */
  gap: 12px; /* Separación */
  padding: 12px 12px; /* Padding */
  border-radius: 16px; /* Esquinas */
  border: 1px solid rgba(255,255,255,.12); /* Borde tenue */
  background: rgba(255,255,255,.02); /* Fondo suave */
  cursor:pointer; /* Cursor click */
  text-align:left; /* Texto alineado a la izquierda */

  /* ESTO es lo importante */ /* Comentario original del autor */
  color: rgba(255,255,255,.92); /* Fuerza color de texto del track */
  -webkit-text-fill-color: rgba(255,255,255,.92); /* Fuerza el relleno del texto en motores WebKit/Blink */
} /* Cierra .track */

.track *{ /* Aplica a todos los descendientes dentro de .track */
  color: inherit; /* Hereda el color del contenedor */
  -webkit-text-fill-color: currentColor; /* Relleno del texto = color actual (evita colores raros en WebKit) */
} /* Cierra .track * */


.track__play{ /* Zona/botón de play del track */
  width: 34px; height: 34px; /* Tamaño fijo */
  border-radius: 12px; /* Esquinas */
  display:grid; place-items:center; /* Centrado perfecto con grid */
  border: 1px solid rgba(255,255,255,.14); /* Borde */
  background: rgba(255,255,255,.03); /* Fondo */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente */
} /* Cierra .track__play */

.track__meta{ display:flex; flex-direction: column; gap: 2px; flex: 1; } /* Meta en columna, gap pequeño, ocupa espacio */
.track__title{ font-weight: 600; letter-spacing: .02em; } /* Título del track: semibold y leve tracking */
.track__artist{ font-size: 12px; color: var(--muted); } /* Artista: pequeño y atenuado */

.track__state{ color: rgba(255,255,255,.45); } /* Estado (ej: playing) tenue */

.track.is-active{ /* Track seleccionado */
  border-color: rgba(33,255,106,.45); /* Borde verde */
  box-shadow: 0 0 0 2px rgba(33,255,106,.10) inset; /* Glow interior */
} /* Cierra .track.is-active */

.track.is-playing{ /* Track en reproducción */
  border-color: rgba(33,255,106,.75); /* Borde más intenso */
  background: rgba(33,255,106,.08); /* Fondo verdoso */
} /* Cierra .track.is-playing */
.track.is-playing .track__play{ /* El botón play dentro del track en reproducción */
  border-color: rgba(33,255,106,.75); /* Borde verde intenso */
  background: rgba(33,255,106,.14); /* Fondo verde más marcado */
} /* Cierra selector compuesto */

/* Now Playing */ /* Comentario: tarjeta “ahora sonando” */
.now{ /* Contenedor now playing */
  border: 1px solid rgba(255,255,255,.14); /* Borde */
  border-radius: var(--radius); /* Radio */
  background: rgba(255,255,255,.03); /* Fondo */
  padding: 14px; /* Padding */
  display:flex; /* Flex */
  gap: 14px; /* Separación */
  align-items: center; /* Centrado vertical */
  box-shadow: var(--shadow); /* Sombra */
} /* Cierra .now */
.now__cover{ /* Contenedor de la portada */
  width: 120px; /* Ancho fijo */
  aspect-ratio: 1 / 1; /* Mantiene cuadrado */
  border-radius: 14px; /* Esquinas */
  overflow:hidden; /* Recorta la imagen si sobresale */
  border: 1px solid rgba(255,255,255,.14); /* Borde */
  background: rgba(255,255,255,.02); /* Fondo */
} /* Cierra .now__cover */
.now__cover img{ /* Imagen de portada */
  width: 100%; /* Ocupa ancho */
  height: 100%; /* Ocupa alto */
  object-fit: cover; /* Recorta manteniendo proporción */
} /* Cierra .now__cover img */
.now__label{ /* Etiqueta “NOW PLAYING” */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente */
  letter-spacing: .18em; /* Tracking */
  font-size: 11px; /* Tamaño */
  color: rgba(255,255,255,.70); /* Color tenue */
  margin-bottom: 6px; /* Separación inferior */
} /* Cierra .now__label */
.now__title{ /* Título de la canción */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente */
  letter-spacing: .10em; /* Tracking */
  font-weight: 800; /* Bold */
  font-size: 16px; /* Tamaño */
} /* Cierra .now__title */
.now__artist{ color: var(--muted); margin-top: 6px; } /* Artista: atenuado y con margen superior */
.now__hint{ margin-top: 10px; font-size: 12px; line-height: 1.6; } /* Texto de ayuda: pequeño, legible */

/* VIDEO */ /* Comentario: sección video */
.video{ /* Grid principal del bloque video */
  display:grid; /* Layout grid */
  grid-template-columns: .55fr 1fr; /* Lista más estrecha + player más ancho */
  gap: 18px; /* Separación */
  align-items: start; /* Alineación superior */
} /* Cierra .video */

.video__list{ /* Lista de vídeos */
  border: 1px solid rgba(255,255,255,.14); /* Borde */
  border-radius: var(--radius); /* Radio */
  background: rgba(255,255,255,.03); /* Fondo */
  padding: 10px; /* Padding */
  display:flex; /* Flex */
  flex-direction: column; /* Columna */
  gap: 10px; /* Separación */
} /* Cierra .video__list */

.vitem{ /* Item de video */
  display:flex; align-items:center; gap: 12px; justify-content: space-between; /* Flex: centra, separa y alinea extremos */
  padding: 12px; /* Padding */
  border-radius: 16px; /* Esquinas */
  border: 1px solid rgba(255,255,255,.12); /* Borde tenue */
  background: rgba(255,255,255,.02); /* Fondo suave */
  cursor:pointer; /* Click */
  text-align:left; /* Texto a la izquierda */
} /* Cierra .vitem */
.vitem:hover{ border-color: rgba(255,255,255,.20); background: rgba(255,255,255,.04); } /* Hover: borde y fondo más visibles */
.vitem.is-active{ /* Item activo/seleccionado */
  border-color: rgba(255,43,214,.50); /* Borde magenta */
  box-shadow: 0 0 0 2px rgba(255,43,214,.10) inset; /* Glow magenta interior */
  background: rgba(255,43,214,.06); /* Fondo magenta sutil */
} /* Cierra .vitem.is-active */

.vitem__idx{ /* Índice del video */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente */
  letter-spacing: .18em; /* Tracking */
  color: rgba(255,255,255,.70); /* Tenue */
  min-width: 38px; /* Reserva ancho para alineación */
} /* Cierra .vitem__idx */
.vitem__title{ flex: 1; font-weight: 600; } /* Título ocupa espacio y es semibold */
.vitem__chip{ /* Chip/meta del video */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente */
  letter-spacing: .14em; /* Tracking */
  font-size: 11px; /* Tamaño */
  padding: 6px 10px; /* Padding */
  border-radius: 999px; /* Píldora */
  border: 1px solid rgba(255,255,255,.14); /* Borde */
  background: rgba(255,255,255,.03); /* Fondo */
} /* Cierra .vitem__chip */

.video__player{ /* Contenedor del player */
  border: 1px solid rgba(255,255,255,.14); /* Borde */
  border-radius: var(--radius); /* Radio */
  background: rgba(255,255,255,.03); /* Fondo */
  padding: 12px; /* Padding */
  box-shadow: var(--shadow); /* Sombra */
} /* Cierra .video__player */

.ratio16x9{ /* Wrapper para mantener proporción 16:9 */
  position: relative; /* Referencia para iframe absoluto */
  width: 100%; /* Ocupa ancho disponible */
  aspect-ratio: 16 / 9; /* Mantiene 16:9 */
  border-radius: 14px; /* Esquinas */
  overflow:hidden; /* Recorta */
  border: 1px solid rgba(255,255,255,.12); /* Borde */
  background: rgba(0,0,0,.35); /* Fondo oscuro de carga */
} /* Cierra .ratio16x9 */
.ratio16x9 iframe{ /* Iframe del video */
  position:absolute; /* Se posiciona dentro del wrapper */
  inset:0; /* Top/right/bottom/left = 0 */
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
} /* Cierra .ratio16x9 iframe */

.video__caption{ margin-top: 10px; } /* Separación superior de la caption */

/* CONTACT */ /* Comentario: sección contacto */
.alert{ /* Caja de alerta */
  border-radius: 16px; /* Esquinas */
  padding: 12px 14px; /* Padding */
  border: 1px solid rgba(255,255,255,.14); /* Borde */
  background: rgba(255,255,255,.03); /* Fondo */
  margin: 12px 0 18px; /* Márgenes: arriba/abajo */
} /* Cierra .alert */
.alert--ok{ border-color: rgba(33,255,106,.55); background: rgba(33,255,106,.08); } /* Variante OK: verde */
.alert--err{ border-color: rgba(255,59,48,.55); background: rgba(255,59,48,.08); } /* Variante error: rojo */

.contact{ /* Grid de la sección contacto */
  display:grid; /* Layout grid */
  grid-template-columns: 1.1fr .9fr; /* Dos columnas */
  gap: 18px; /* Separación */
} /* Cierra .contact */

.form{ /* Contenedor del formulario */
  border: 1px solid rgba(255,255,255,.14); /* Borde */
  border-radius: var(--radius); /* Radio */
  background: rgba(255,255,255,.03); /* Fondo */
  padding: 14px; /* Padding */
  box-shadow: var(--shadow); /* Sombra */
} /* Cierra .form */

.form__row{ /* Fila con dos campos */
  display:grid; /* Grid */
  grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
  gap: 12px; /* Separación */
} /* Cierra .form__row */

.field{ display:block; margin-bottom: 12px; } /* Campo como bloque y con separación inferior */
.field__label{ /* Etiqueta del campo */
  display:block; /* Para que ocupe línea completa */
  font-family: Orbitron, "Eurostile", "Futura", system-ui; /* Fuente */
  letter-spacing: .14em; /* Tracking */
  font-size: 11px; /* Tamaño */
  color: rgba(255,255,255,.70); /* Color tenue */
  margin-bottom: 8px; /* Separación del input */
} /* Cierra .field__label */
.field__input{ /* Input/textarea base */
  width: 100%; /* Ocupa ancho */
  border-radius: 14px; /* Radio */
  border: 1px solid rgba(255,255,255,.14); /* Borde */
  background: rgba(0,0,0,.22); /* Fondo oscuro */
  color: rgba(255,255,255,.92); /* Texto claro */
  padding: 12px 12px; /* Padding */
  outline: none; /* Quita outline por defecto (se reemplaza con :focus) */
} /* Cierra .field__input */
.field__input:focus{ /* Estilo al enfocar */
  border-color: rgba(33,255,106,.45); /* Borde verde */
  box-shadow: 0 0 0 2px rgba(33,255,106,.10); /* Halo verde */
} /* Cierra .field__input:focus */
.field__input--area{ resize: vertical; min-height: 140px; } /* Textarea: solo resize vertical y altura mínima */

.form__actions{ display:flex; align-items:center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } /* Acciones: flex con wrap */
.form__foot{ margin-top: 12px; line-height: 1.7; } /* Pie del formulario: separación e interlineado */

.footer{ /* Footer general */
  margin-top: 28px; /* Separación superior */
  border-top: 1px solid rgba(255,255,255,.10); /* Línea superior */
  padding-top: 18px; /* Padding superior */
} /* Cierra .footer */
.footer__inner{ /* Contenido interno footer */
  display:flex; justify-content: space-between; gap: 18px; /* Flex: extremos + gap */
  color: rgba(255,255,255,.72); /* Texto tenue */
} /* Cierra .footer__inner */

/* Responsive */ /* Comentario: media queries */
@media (max-width: 980px){ /* Reglas para pantallas <= 980px */
  .hero__grid, .audio, .video, .contact{ grid-template-columns: 1fr; } /* Pasa grids a una columna */
  .brand{ min-width: unset; } /* Quita ancho mínimo de brand */
  .nav{ justify-content: flex-start; } /* Nav alineado a la izquierda */
} /* Cierra media query 980px */
@media (max-width: 620px){ /* Reglas para pantallas <= 620px */
  .header__inner{ flex-direction: column; align-items: stretch; } /* Header apilado y ancho completo */
  .nav{ justify-content: space-between; } /* Nav reparte espacio */
  .form__row{ grid-template-columns: 1fr; } /* Formularios a una columna */
} /* Cierra media query 620px */
/* Evita que el header sticky tape los anchors (#canciones, #videos, etc.) */ /* Comentario: solución para anclas con header sticky */
:root {  /* Reapertura de :root para ajustar scroll */
  scroll-padding-top: 110px; /* ajusta si tu header es más alto */ /* Deja espacio al saltar a #anchors */
} /* Cierra :root (scroll-padding) */

/* Alternativa / refuerzo por sección */ /* Comentario: refuerzo por elemento objetivo */
.section { /* Aplica a secciones */
  scroll-margin-top: 110px; /* mismo valor */ /* Margen al hacer scroll hacia una sección */
} /* Cierra .section (scroll-margin) */

/* ===== FIX: header gigante por imagen de logo demasiado grande ===== */

/* Reduce el alto “real” del header */
.header__inner{
  padding: 6px 0; /* menos padding vertical = header más bajo */
}

/* Quita el min-width que puede empujar cosas y forzar espacios raros */
.brand{
  min-width: unset; /* deja que el bloque se ajuste */
  gap: 10px;        /* un poco menos de separación */
}

/* MUY IMPORTANTE:
   Si el logo grande es una IMG dentro de .brand__logo, aquí lo capamos */
.brand__logo img{
  max-height: 48px; /* <-- AJUSTA: 36px / 40px / 48px según quieras */
  width: auto;      /* mantiene proporción */
  height: auto;     /* mantiene proporción */
  object-fit: contain; /* asegura que “quepa” sin deformar */
}

/* Por si la imagen gigante está directamente en el header (no dentro de .brand__logo) */
.header img{
  max-height: 98px; /* limita cualquier imagen que esté dentro del header */
  width: auto;
  height: auto;
}
.lyrics__text{
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 487px;
  overflow: auto;
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 10px;
}