:root {
  --bg: #1f2420; --panel: #1a1d21; --blue: #275482; --blue-d: #162738;
  --line: #3e6082; --green: #4b8f29; --gold: #ffaa00; --chord: #1976d2;
  --paper: #f6f7f2; --ink: #1b1b1b;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
h3{ font-size: 26px;color:#172A63; }
h4{ font-size: 246px;color:#172A63; }
body { margin: 0;
	  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
background: linear-gradient(to right, #88ef2d 0%,#50a51f 5%,#187f59 28%,#187f59 69%,#50a51f 95%,#7bea2c 100%);

color: #fff; font: 400 1rem/1.5 "Open Sans", Verdana, sans-serif; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid #ff0; outline-offset: 2px; }
h1, h2 { font-family: "Bree Serif", serif; line-height: 1.2; margin: 0 0 .75rem; }
h2 { font-size: 2.5rem; color:#0C1C69; background:#F0DD60; border-top-left-radius: 10px;border-top-right-radius: 10px;}

/* ---- navegación ---- */
.site-nav { display: flex; align-items: center; flex-wrap: wrap; padding: 0 1rem;
  background: linear-gradient(#a9db80, #84aa64 48%, #96c56f); }
.logo img { display: block; height: 60px; width: auto; }
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; margin-left: auto; }
.menu li { position: relative; }
.menu a { display: block; padding: .9rem 1.2rem; background: #254441; color: #fff;
  font: 1.1rem "Bree Serif", serif; text-decoration: none; }
.menu a:hover, .menu a:focus { background: #f00; color: #000; }
.menu ul { display: none; position: absolute; top: 100%; left: 0; min-width: 11rem; z-index: 10; }
.menu ul ul { top: 0; left: 100%; }
.menu li:hover > ul, .menu li:focus-within > ul { display: block; }
.has-sub > a::after { content: " +"; }
.menu-toggle { display: none; margin-left: auto; padding: .7rem 1rem; border: 0; background: #254441; color: #fff; font: inherit; }

@media (max-width: 768px) {
  .menu-toggle { display: block; }
  .menu { display: none; width: 100%; flex-direction: column; }
  .menu.open { display: flex; }
  .menu ul { position: static; display: block; padding-left: 1rem; }
}

/* ---- layout ---- */
.song { max-width: 900px; margin: 2rem auto; padding: 0 1rem; display: grid; gap: 1.25rem; text-align: center; }
.card { background: transparent; border: none; border-radius: 10px; padding: 1.25rem; }
.song-head {  background: transparent; border:none; border-radius: 15px; color: var(--gold); padding: 1.25rem; }
.song-head h1 {  font-size: 3.2rem; color: #070B46; text-align:center;  }
.song-meta { margin: 0; font-size: 1.5rem; color:#070B46; }
.cover { height: 160px; width: auto; border-radius: 8px; margin-left: 75px; }
.flag { display: block; margin: 2.5rem auto; }

/* ---- botones ---- */
.btn, #toggle-notation { display: inline-block; min-height: 44px; padding: .55rem 1.1rem; border: 3px solid var(--green);
  border-radius: 6px; cursor: pointer; font: 700 1rem Arial, sans-serif; color: #000; text-decoration: none;
  background: radial-gradient(ellipse at center, #b0bf89 0%, #00d600 100%); box-shadow: 3px 4px 0 #123859; }
.btn:hover, #toggle-notation:hover { background: radial-gradient(ellipse at center, #b0bf89 0%, #157f00 100%); color: #ff0; text-decoration: none; }
.btn-green { background: linear-gradient(var(--blue), var(--blue-d)); border-color: var(--line); color: #fff; width:40%;font-size: 2.5rem; border-radius: 15px;text-decoration: none;   }
.btn-green:hover { background: linear-gradient(#23faec, #495eeb); color: #000;text-decoration: none; }
.btn-blue { background: linear-gradient(var(--blue), var(--blue-d)); border-color: var(--line); color: #fff; text-decoration: none;}

.btn-blue:hover { background: linear-gradient(#23faec, #495eeb); color: #000;text-decoration: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; }
.speed { display: flex; align-items: center; gap: .5rem;background:#A80000;margin-top: 4px;padding-top: 10px;padding-bottom: 12px;padding-left: 10px;padding-right: 10px;  border-radius: 15px;   }
.speed input { width: 10rem; }

/* ---- transposición ---- */
.transpose { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem;
  margin: .5rem 0 1rem; padding: .6rem 1rem; background: linear-gradient(var(--blue), var(--blue-d)); border: 1px solid var(--line); border-radius: 8px; }
.transpose input { width: 4.5rem; padding: .35rem; text-align: center; font-size: 1.1rem; color: #111333; border: 1px solid #29887d; }
.plus, .minus, #toggle-notation { padding: .35rem .9rem; }
.plus, .minus { min-width: 44px; min-height: 44px; border: 1px solid #fff; border-radius: 5px; background: transparent; color: #fff; font: 700 1.2rem sans-serif; cursor: pointer; }
.plus:hover, .minus:hover { box-shadow: inset 0 3px 7px rgba(255, 255, 255, .3); }
#toggle-notation { min-height: 44px; }

/* ---- acordes ---- */
.chord-names { color:#CCB833; margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 700;font-family: "Bree Serif", }
.chord-grid { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; background: transparent; color: #000; padding: .75rem; border-radius: 8px; }
.chord-grid figure { margin: 0; text-align: center; }
.chord-grid img { height: 100px; width: auto; display: block; margin: 0 auto; }
.chord-grid audio { width: 110px; margin-top: 4px; }

/* ---- hoja de acordes y letra ---- */
.sheet { background: var(--paper); color: var(--ink); padding: 1rem; border-radius: 8px; overflow-x: auto; text-align: left; font-size: 1.05rem; }
.sheet { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* evita que el móvil escale cada línea distinto */
/* Los espacios de los acordes se ajustaron a ojo con una fuente PROPORCIONAL (Open Sans),
   así que acordes y letra deben usar exactamente la misma fuente y tamaño. */
.sheet .chord-line, .sheet .lyric-line { margin: 0; white-space: pre; line-height: 1.45;
  font-family: "Open Sans", Verdana, sans-serif; font-size: clamp(15px, 4.2vw,28px);
  font-variant-ligatures: none; letter-spacing: 0; tab-size: 8; }
.sheet .chord-line, .transposed-chord { color: var(--chord); font-weight: 700; }

/* ---- bloques de contenido ---- */
.paper { background: #e4e9f0; color: #000; border-color: #6581a6; }
.tips { background: var(--panel); }
.about p { background: #cbd6ce; color: #3d403d; padding: 1rem; border-radius: 10px; text-align: left; margin: 0; }
.audio-card { background: linear-gradient(90deg, #f2e530, #2ee52b 50%, #ecf282); color: #000; border-radius: 15px; padding: 1rem; }
.audio-card p { margin: 0 0 .5rem; }
.audio-card audio { width: 100%; max-width: 420px; }
.video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.scale-frame { width: 100%; height: 0; border: 0; }
.notice { font-size: 1.4rem; padding-bottom: 3rem;margin-left: 0px; }
table.blueTable {
	 border-radius: 10px;
  border: 1px solid #1C6EA4;
background: linear-gradient(to right, rgba(136,214,27,1) 1%,rgba(205,235,139,1) 20%,rgba(205,235,139,1) 20%,rgba(205,235,139,1) 82%,rgba(136,214,27,1) 100%); 
  width: 100%;
  text-align: left;
  border-collapse: collapse;
 } 
 #water{ width:40%; max-width: 380px; float:center;}