:root { --accent: #9b6309; --paper: #faf8f3; --ink: #222722; }
body { background: var(--paper); color: var(--ink); }
body::before { display: none; }
header { border-radius: 16px; box-shadow: 0 6px 24px #22272208; }
/* Encabezado de marca compartido en todas las secciones. */
#main-header,
header {
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(34, 39, 34, .08);
}
.brand-logo,
.brand {
  align-items: center;
  gap: 14px;
}
.brand-logo img,
.brand img {
  width: 56px;
  height: 56px;
  padding: 3px;
  object-fit: cover;
  border: 1px solid #e5a919;
  border-radius: 50%;
  background: #fff;
}
.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.brand-title,
.brand-logo > span {
  font-family: 'Unica One', sans-serif;
  font-size: clamp(20px, 2.2vw, 29px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: 2px;
  color: #c77f0d;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-tagline {
  font-family: 'Unica One', sans-serif;
  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 1.3px;
  color: #c77f0d;
  text-transform: uppercase;
  white-space: nowrap;
}
nav ul { gap: 12px; }
nav ul li a { display: inline-block; padding: 10px 8px; }
nav ul li a.active { background: #f3e9d3; color: #78500a; border-radius: 8px; }
h1, h2, h3 { text-wrap: balance; }
.welcome-section { display: grid; grid-template-columns: 1.45fr 1fr; align-items: center; gap: 64px; text-align: left; padding: 60px 0 70px; }
.eyebrow { display: block; font: 700 11px/1.5 Inter, sans-serif; letter-spacing: 1.8px; color: var(--accent); }
.welcome-section h1 { font: 700 clamp(44px, 5.6vw, 76px)/1.02 Inter, sans-serif; letter-spacing: -3px; color: var(--ink); margin: 22px 0; }
.welcome-section h1 em { font-family: Georgia, serif; font-weight: 400; color: var(--accent); }
.hero-intro { font-size: 17px; line-height: 1.85; color: #596058; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 30px; }
.btn-custom { border-radius: 10px; min-height: 44px; background: #e5a919; color: #222722; box-shadow: none; }
.hero-secondary { font-size: 14px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid #b0b3aa; }
.hero-note { font-size: 12px; color: #6b7168; margin-top: 24px; }
.profile-card { width: 100%; margin: 0; border-radius: 24px; padding: 40px 30px; background: #f1ecdf; border: 1px solid #e4ddcb; box-shadow: none; }
.profile-card::before { display: none; }
.avatar-container { width: 108px; height: 108px; }
.profile-card h3 { font-size: 28px; }
.instagram-btn { background: #222f29; border-radius: 10px; box-shadow: none; }
.explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 56px; }
.home-weather { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px 28px; margin:0 0 32px; padding:22px 26px; border:1px solid #deded3; border-radius:16px; background:#fffdfa; }.home-weather .weather-kicker { color:#6b7168; font-size:11px; grid-column:1; }.home-weather strong { grid-column:2; grid-row:1 / span 2; font:600 42px/1 Inter,sans-serif; color:#263329; letter-spacing:-2px; }.home-weather > span:not(.weather-kicker) { grid-column:1; color:#62685e; font-size:13px; }.home-weather a { grid-column:3; grid-row:1 / span 2; font-size:14px; font-weight:600; color:var(--accent); }
.explore-grid > a { display: block; padding: 26px; border: 1px solid #deded3; border-radius: 16px; background: #fffdfa; }
.explore-grid > a:hover { border-color: #9b6309; transform: translateY(-3px); }
.explore-grid h2 { font: 600 20px/1.4 Inter, sans-serif; color: #263329; margin: 18px 0 10px; }
.explore-grid p { color: #62685e; font-size: 14px; }
.docs-section, .subscription-section, .whatsapp-section, .page-title-section, .music-section { border-radius: 18px; box-shadow: none; }
.subscription-box { max-width: 580px; }
.subscription-section { padding: 48px 28px; }
.form-group input[type="text"], .form-group input[type="email"], .input-privado { min-height: 48px; font-size: 16px; min-width: 0; }
.sticky-player-bar { border-radius: 14px; bottom: max(12px, env(safe-area-inset-bottom)); }
.equalizer-icon span { animation: none; }
.site-footer { max-width: 1180px; margin: 0 auto; padding: 30px 20px 130px; border-top: 1px solid #deded3; font-size: 13px; text-align: center; color: #61675e; }
.site-footer > a:first-child { font-size: 22px; font-weight: 700; color: var(--accent); }
.site-footer p { margin: 4px 0 18px; }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 12px 20px; background: #222f29; color: white; z-index: 10000; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #94610a; outline-offset: 4px; }
body.dark-mode { background-image: none; }
body.dark-mode .welcome-section h1, body.dark-mode .explore-grid h2 { color: #f6f3eb; }
body.dark-mode .eyebrow, body.dark-mode h1 em { color: #e8b850; }
body.dark-mode .explore-grid > a { background: #202520; border-color: #42483e; }
body.dark-mode .home-weather { background:#202520; border-color:#42483e; } body.dark-mode .home-weather strong { color:#f6f3eb; } body.dark-mode .home-weather .weather-kicker, body.dark-mode .home-weather > span:not(.weather-kicker) { color:#c8ccc4; }
body.dark-mode nav ul li a.active { background: #353024; }
body.dark-mode input, body.dark-mode textarea { background: #232923 !important; color: #f6f3eb !important; border-color: #71776a !important; }
body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #b9bdb3; }
body.dark-mode label { color: #d7dacf !important; }
.mobile-menu-btn, .dark-btn { min-width: 44px; min-height: 44px; }
.profile-link { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; overflow:hidden; background:#f0b415; color:#283128; font-size:18px; }
.profile-link:hover { transform:scale(1.05); }
.profile-avatar { width:100%; height:100%; object-fit:cover; }
@media (max-width: 1000px) {
 .welcome-section { gap: 30px; }
 .brand-tagline { display: none; }
}
@media (max-width: 768px) {
 .welcome-section { grid-template-columns: 1fr; padding: 28px 8px 36px; gap: 32px; }
 .welcome-section h1 { letter-spacing: -2px; font-size: clamp(42px, 10vw, 66px); }
 .profile-card { max-width: none; padding: 28px; }
 .explore-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
 .home-weather { grid-template-columns:1fr auto; gap:8px 16px; padding:20px; }.home-weather strong { grid-column:2; grid-row:1 / span 2; }.home-weather a { grid-column:1 / -1; grid-row:auto; margin-top:8px; }
 .explore-grid > a { padding: 22px; }
 .explore-grid h2 { margin: 10px 0 8px; }
 .page-title-section, .music-section { padding: 26px 18px; }
 .barra-bienvenida { flex-wrap: wrap; gap: 12px; }
 nav ul { align-items: stretch; }
 nav ul li a { width: 100%; text-align: center; }
 .hero-actions { gap: 16px; }
 .brand-logo { min-width: 0; }
 .brand-logo img, .brand img { width: 44px; height: 44px; }
 .brand-title, .brand-logo > span { font-size: 19px; letter-spacing: 1.4px; }
 .brand-tagline { font-size: 10px; letter-spacing: .9px; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Encabezado refinado: una cápsula ligera que mantiene la identidad tipográfica de la radio. */
html body #main-header {
  position: sticky;
  top: 12px;
  z-index: 1000;
  width: min(calc(100% - 32px), 1180px);
  margin: 12px auto 32px;
  padding: 0;
  overflow: visible;
  background: rgba(255, 253, 248, .88);
  border: 1px solid rgba(184, 130, 10, .18);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(46, 42, 32, .12), inset 0 1px rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html body #main-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, #e5a919 22%, #c77f0d 50%, #e5a919 78%, transparent);
}
html body #main-header .nav-wrapper {
  min-height: 72px;
  padding: 10px 18px;
  gap: 18px;
}
html body #main-header .brand-logo { gap: 12px; }
html body #main-header .brand-logo img {
  width: 48px;
  height: 48px;
  padding: 3px;
  border: 1px solid rgba(199,127,13,.65);
  box-shadow: 0 4px 12px rgba(199,127,13,.18);
}
html body #main-header .brand-title,
html body #main-header .brand-logo > span {
  font-family: 'Unica One', sans-serif;
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: 2.1px;
  color: #9b6309;
}
html body #main-header .brand-tagline {
  font-family: 'Unica One', sans-serif;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #7a6950;
}
html body #main-header nav ul {
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(122,105,80,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.58);
}
html body #main-header nav ul li a:not(.profile-link) {
  display: inline-flex;
  align-items: center;
  min-height: 35px;
  padding: 8px 10px;
  border-radius: 10px;
  font-family: 'Unica One', sans-serif;
  font-size: 12px;
  letter-spacing: .65px;
  color: #465047;
  text-transform: uppercase;
}
html body #main-header nav ul li a:not(.profile-link):hover,
html body #main-header nav ul li a.active:not(.profile-link) {
  background: #f2dfb8;
  color: #805000;
  box-shadow: inset 0 0 0 1px rgba(184,130,10,.14);
}
html body #main-header .profile-link {
  width: 38px !important;
  height: 38px;
  padding: 0;
  border: 2px solid #fff;
  outline: 1px solid rgba(199,127,13,.45);
  background: linear-gradient(135deg, #f7cf62, #c77f0d);
  box-shadow: 0 3px 10px rgba(103,68,7,.2);
}
html body #main-header .profile-link:hover { transform: translateY(-1px) scale(1.05); }
html body #main-header .profile-link svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
html body #main-header .dark-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(122,105,80,.16);
  border-radius: 11px;
  background: rgba(255,255,255,.7);
}
body.dark-mode #main-header {
  background: rgba(28, 33, 28, .9) !important;
  border-color: rgba(232,184,80,.2) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05);
}
body.dark-mode #main-header nav ul { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
body.dark-mode #main-header nav ul li a:not(.profile-link) { color: #e4e7df !important; }
body.dark-mode #main-header nav ul li a.active:not(.profile-link),
body.dark-mode #main-header nav ul li a:not(.profile-link):hover { background: rgba(232,184,80,.16); color: #f4c55d !important; }
body.dark-mode #main-header .brand-tagline { color: #d9c99f; }
body.dark-mode #main-header .dark-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
@media (max-width: 900px) {
  html body #main-header { width: min(calc(100% - 24px), 1180px); border-radius: 18px; }
  html body #main-header .nav-wrapper { min-height: 64px; padding: 8px 13px; }
  html body #main-header .brand-logo img { width: 42px; height: 42px; }
  html body #main-header .brand-tagline { display: none; }
  html body #main-header nav ul { padding: 8px; border: 0; background: transparent; }
  html body #main-header nav ul li a:not(.profile-link) { width: 100%; justify-content: center; }
  html body #main-header .profile-link { margin: 4px auto; }
}