/* MLC PlayRadio — sitio web. Colores del tema oscuro del programa. */
:root {
  --fondo: #1a1a1f; --panel: #24242b; --panel-claro: #2c2c34; --borde: #383840;
  --texto: #e0e0e0; --tenue: #9a9aa3; --naranja: #ff7a00; --naranja-claro: #ff9a2e;
  --verde: #28c74f; --azul: #0099ff; --rojo: #ff4444;
  --titulos: "Barlow Condensed", "Arial Narrow", sans-serif;
  --cuerpo: "Barlow", "Segoe UI", system-ui, sans-serif;
  --ancho: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--cuerpo); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--naranja-claro); }
a:hover { color: #ffb866; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.1; margin: 0 0 .5em; color: #fff; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 600; }
p { margin: 0 0 1em; max-width: 68ch; }
.contenedor { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; }
.tenue { color: var(--tenue); }

/* ---- Barra superior ---- */
.barra { position: sticky; top: 0; z-index: 50; background: rgba(26,26,31,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.barra .contenedor { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; margin-right: auto; }
.marca img { width: 44px; height: 44px; }
.marca span { font-family: var(--titulos); font-size: 1.55rem; font-weight: 700; }
.marca small { display: block; font-family: var(--cuerpo); font-size: .72rem; color: var(--tenue); font-weight: 500; margin-top: -2px; }
.nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a { color: var(--texto); text-decoration: none; font-weight: 600; padding: .45rem .8rem; border-radius: 6px; }
.nav a:hover { background: var(--panel-claro); color: #fff; }
.nav a[aria-current="page"] { color: var(--naranja-claro); box-shadow: inset 0 -2px 0 var(--naranja); border-radius: 6px 6px 0 0; }
.nav a.boton-nav { background: var(--naranja); color: #1a1a1f; }
.nav a.boton-nav:hover { background: var(--naranja-claro); color: #1a1a1f; }

/* ---- Botones ---- */
.boton { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--cuerpo); font-weight: 700; font-size: 1.05rem; padding: .85rem 1.4rem; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; transition: transform .08s, filter .15s; }
.boton:active { transform: translateY(1px); }
.boton-principal { background: var(--naranja); color: #1a1a1f; box-shadow: 0 3px 0 #b85600; }
.boton-principal:hover { filter: brightness(1.1); color: #1a1a1f; }
.boton-secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.boton-secundario:hover { background: var(--panel-claro); color: #fff; }

/* ---- Pie ---- */
.pie { border-top: 1px solid var(--borde); margin-top: 5rem; padding: 2.5rem 0; color: var(--tenue); font-size: .95rem; }
.pie .contenedor { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 760px) { .barra .contenedor { flex-wrap: wrap; padding: .6rem 0; } .nav { width: 100%; } body { font-size: 16px; } }

/* Portada: solo el reloj en hora real */
.consola.consola-solo-reloj { display: flex; align-items: center; justify-content: center; }
.consola.consola-solo-reloj .reloj { margin: 0; }