/* Editorial de lujo: bloques en negativo (negro/crema), tipografía Ballet para
   los gestos grandes, un tercer color granate como acento discreto. Tipografías
   del sistema salvo Ballet (autoalojada) para que la web siga funcionando sin
   conexión en el iPad. */

@font-face{
  font-family:'Ballet';
  src:url('../fonts/Ballet-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --papel:#f7f2e6;
  --papel-2:#efe6d1;
  --tinta:#1c140d;
  --tinta-suave:#4a3d30;
  --negro:#0c0a08;
  --crema:#f2ead9;
  --crema-suave:rgba(242,234,217,.68);
  --crema-linea:rgba(242,234,217,.18);
  --burdeos:#5e1224;
  --burdeos-2:#3c0b16;
  --granate:#7a0f22;
  --granate-claro:#a8213f;
  --oro:#b3872e;
  --oro-claro:#e4c477;
  --gris:#a79e8d;
  --linea:rgba(28,20,13,.16);
  --linea-fuerte:rgba(28,20,13,.34);
  --sombra:rgba(12,10,8,.4);

  --fuente-cuerpo:Baskerville,'Baskerville Old Face','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --fuente-titular:'Big Caslon',Didot,Baskerville,'Hoefler Text',Georgia,'Times New Roman',serif;
  --fuente-display:'Ballet',cursive;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--fuente-cuerpo);
  color:var(--tinta);
  background:var(--papel);
  min-height:100vh;
  line-height:1.6;
}

button, input{ font-family:inherit; }
button{ touch-action:manipulation; cursor:pointer; }
::selection{ background:var(--oro-claro); color:var(--tinta); }

/* ------------------------------------------------------------------ */
/* Cabecera — bloque negro, "Piano" en Ballet, "& Armonía" a su lado   */
/* ------------------------------------------------------------------ */
.cabecera{
  position:relative;
  background:
    radial-gradient(ellipse 900px 460px at 84% -14%, rgba(122,15,34,.22), transparent 62%),
    radial-gradient(ellipse 760px 460px at -8% 118%, rgba(122,15,34,.14), transparent 58%),
    var(--negro);
  color:var(--crema);
  padding:34px 26px 26px;
  border-bottom:1px solid var(--crema-linea);
}
.lema{
  font-style:italic;
  font-size:17px;
  letter-spacing:.01em;
  color:var(--crema-suave);
  margin:0 0 14px;
  max-width:44ch;
}
.marca{
  margin:0;
  font-weight:normal;
  line-height:.9;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:20px;
}
.marca-grande{
  font-family:var(--fuente-display);
  font-size:clamp(78px, 15vw, 168px);
  color:var(--crema);
}
.marca-cola{
  display:inline-flex;
  align-items:center;
  column-gap:14px;
}
.cabecera .y{
  font-family:var(--fuente-titular);
  font-style:italic;
  font-size:clamp(28px, 5vw, 48px);
  color:var(--crema-suave);
}
.marca-chica{
  font-family:var(--fuente-titular);
  font-variant:small-caps;
  font-size:clamp(19px, 3vw, 28px);
  letter-spacing:.09em;
  color:var(--crema);
}

/* Barra del pianista activo */
.barra-perfil{
  margin-top:26px;
  padding-top:16px;
  border-top:1px solid var(--crema-linea);
  display:flex; align-items:center; gap:14px;
}
.barra-perfil[hidden]{ display:none; }
.medallon-mini{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--crema);
  background:transparent;
  border:1px solid var(--crema);
  padding:0;
}
.perfil-info{ display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.perfil-nombre{ font-family:var(--fuente-titular); font-size:19px; letter-spacing:.03em; color:var(--crema); }
.perfil-rango{ font-size:15px; font-style:italic; color:var(--crema-suave); }

/* ------------------------------------------------------------------ */
/* Estructura general — bloque crema para lectura                     */
/* ------------------------------------------------------------------ */
#vista{ max-width:960px; margin:0 auto; padding:38px 26px 60px; }
.panel{ padding:4px 2px; }

.titulo-seccion{
  font-family:var(--fuente-titular);
  font-weight:normal;
  font-size:clamp(28px, 4vw, 38px);
  letter-spacing:.01em;
  color:var(--tinta);
  border-bottom:1px solid var(--linea-fuerte);
  padding-bottom:12px;
  margin:6px 0 22px;
}
.texto-suave{ color:var(--tinta-suave); opacity:.85; }

.pie{
  text-align:center;
  color:var(--tinta-suave);
  padding:26px 10px 40px;
  letter-spacing:.2em;
  font-size:15px;
  border-top:1px solid var(--linea);
}

/* Botones: rigor tipográfico, sin marcos dorados */
.boton{
  min-height:46px;
  padding:11px 24px;
  font-size:18px;
  letter-spacing:.05em;
  font-variant:small-caps;
  color:var(--tinta);
  background:transparent;
  border:1px solid var(--tinta);
  border-radius:0;
  transition:background-color .15s ease, color .15s ease;
}
.boton:hover{ background:var(--tinta); color:var(--papel); }
.boton:active{ transform:translateY(1px); }
.boton-principal{
  background:var(--tinta);
  color:var(--papel);
  border-color:var(--tinta);
}
.boton-principal:hover{ background:var(--granate); border-color:var(--granate); color:var(--crema); }
.boton-pequeno{ min-height:44px; padding:8px 16px; font-size:16px; }
.boton-enlace{
  background:none; border:none;
  color:var(--tinta-suave);
  text-decoration:underline;
  text-decoration-color:var(--linea-fuerte);
  text-underline-offset:3px;
  font-size:16px;
  min-height:44px;
  padding:6px 8px;
}
.cabecera .boton-enlace{ color:var(--crema-suave); text-decoration-color:var(--crema-linea); }

/* ------------------------------------------------------------------ */
/* Perfiles                                                            */
/* ------------------------------------------------------------------ */
.rejilla-perfiles{
  display:flex; flex-wrap:wrap; gap:22px; justify-content:center;
  margin-top:22px;
}
.ficha-perfil{
  position:relative;
  width:190px;
  padding:26px 16px;
  text-align:center;
  background:var(--papel);
  border:1px solid var(--linea-fuerte);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.medallon{
  width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; color:var(--tinta);
  background:transparent;
  border:1px solid var(--tinta);
}
.medallon.con-avatar{ font-size:36px; border:none; }
.nombre-perfil{ font-family:var(--fuente-titular); font-size:20px; letter-spacing:.03em; }
.rango{ font-style:italic; font-size:15px; color:var(--tinta-suave); }
.ficha-perfil.nueva{ justify-content:center; }
.ficha-perfil form{ display:flex; flex-direction:column; gap:10px; align-items:center; width:100%; }
.ficha-perfil label{ font-variant:small-caps; letter-spacing:.08em; color:var(--tinta-suave); font-size:15px; }
.ficha-perfil input{
  min-height:44px; width:100%;
  font-size:18px; text-align:center;
  border:1px solid var(--linea-fuerte);
  background:#fffdf8; color:var(--tinta);
  padding:6px;
}
.enlace-avatar{ font-size:14px; padding:2px 6px; min-height:auto; }

/* Selector de emblema */
.selector-avatar{ max-width:340px; }
.rejilla-avatares{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin:6px 0 18px;
}
.opcion-avatar{
  min-height:56px; font-size:26px;
  background:var(--papel);
  border:1px solid var(--linea-fuerte);
}
.opcion-avatar.elegido{
  background:var(--tinta);
  color:var(--papel);
  border-color:var(--tinta);
}

/* ------------------------------------------------------------------ */
/* Barra de estado (MIDI / micrófono)                                  */
/* ------------------------------------------------------------------ */
.barra-estado{
  margin:18px 0;
  padding:14px 16px;
  border:1px solid var(--linea-fuerte);
  background:rgba(122,15,34,.05);
  display:flex; flex-direction:column; gap:8px;
}
.estado-linea{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:16px; }
.punto{
  width:11px; height:11px; border-radius:50%;
  background:var(--gris);
  flex:none;
}
.punto.encendido{ background:var(--granate); box-shadow:0 0 6px rgba(122,15,34,.5); }
.punto.dorado{ background:var(--oro); box-shadow:0 0 6px rgba(179,135,46,.5); }
.aviso-navegador{
  margin:0 0 4px;
  padding:10px 12px;
  background:var(--tinta);
  color:var(--papel);
  font-size:16px;
}

/* ------------------------------------------------------------------ */
/* Círculo de quintas                                                  */
/* ------------------------------------------------------------------ */
.circulo{
  display:block; width:min(92vw,480px); margin:20px auto;
}
.arillo{ fill:none; stroke:var(--linea-fuerte); stroke-width:1; }
.arillo.interior{ stroke-dasharray:2 5; }
.adorno-centro{ fill:var(--linea-fuerte); font-size:26px; }
.nodo{ cursor:pointer; }
.nodo circle{
  stroke:var(--linea-fuerte); stroke-width:1.2;
  fill:var(--papel);
  transition:fill .2s;
}
.nodo text{
  font-family:var(--fuente-titular);
  font-size:17px; text-anchor:middle;
  fill:var(--tinta);
  pointer-events:none;
  font-variant:small-caps;
}
.nodo.completado circle{ fill:var(--granate); stroke:var(--granate); }
.nodo.completado text{ fill:var(--crema); }
.nodo.actual circle{ fill:var(--papel); stroke:var(--tinta); stroke-width:2; animation:pulsoActual 2.6s ease-in-out infinite; }
.nodo.bloqueado{ cursor:default; }
.nodo.bloqueado circle{ fill:var(--papel); opacity:.5; stroke:var(--gris); }
.nodo.bloqueado text{ fill:var(--tinta-suave); opacity:.5; }

@keyframes pulsoActual{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(28,20,13,0)); }
  50%{ filter:drop-shadow(0 0 6px rgba(28,20,13,.35)); }
}

.acciones-fila{
  display:flex; gap:12px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:20px;
}

/* ------------------------------------------------------------------ */
/* Lista de ejercicios                                                 */
/* ------------------------------------------------------------------ */
.lista-ejercicios{ display:flex; flex-direction:column; gap:2px; }
.ejercicio-item{
  display:flex; align-items:center; gap:14px;
  min-height:58px; padding:14px 4px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--linea);
  font-size:18px; color:var(--tinta);
  text-align:left; width:100%;
  transition:background-color .15s ease;
}
.ejercicio-item:hover, .ejercicio-item:active{ background:rgba(122,15,34,.05); }
.ej-titulo{ flex:1; }
.ej-tipo{ font-style:italic; font-size:15px; color:var(--tinta-suave); }
.ej-estrellas{ color:var(--granate); letter-spacing:.15em; white-space:nowrap; }
.tonalidad-prog{ font-style:italic; }

/* ------------------------------------------------------------------ */
/* Lección — bloque negro cuando hay teclado en pantalla                */
/* ------------------------------------------------------------------ */
.panel:has(#zona-teclado){
  background:
    radial-gradient(ellipse 900px 460px at 84% -14%, rgba(122,15,34,.2), transparent 62%),
    radial-gradient(ellipse 760px 460px at -8% 118%, rgba(122,15,34,.12), transparent 58%),
    var(--negro);
  color:var(--crema);
  margin:-38px -26px 0;
  padding:30px 26px 40px;
}
.panel:has(#zona-teclado) .titulo-seccion{ color:var(--crema); border-bottom-color:var(--crema-linea); }
.panel:has(#zona-teclado) .texto-suave{ color:var(--crema-suave); }
.panel:has(#zona-teclado) .boton-enlace{ color:var(--crema-suave); text-decoration-color:var(--crema-linea); }
.panel:has(#zona-teclado) .boton{ color:var(--crema); border-color:var(--crema); }
.panel:has(#zona-teclado) .boton:hover{ background:var(--crema); color:var(--negro); }
.panel:has(#zona-teclado) .boton.boton-principal{ background:var(--crema); color:var(--negro); border-color:var(--crema); }
.panel:has(#zona-teclado) .boton.boton-principal:hover{ background:var(--oro-claro); border-color:var(--oro-claro); color:var(--negro); }
.panel:has(#zona-teclado) .barra-estado{ border-color:var(--crema-linea); background:rgba(242,234,217,.05); }
.panel:has(#zona-teclado) .estado-linea{ color:var(--crema-suave); }
.panel:has(#zona-teclado) .aviso-navegador{ background:var(--crema); color:var(--negro); }

.instruccion{ font-size:19px; max-width:52ch; }
.instruccion::first-letter{
  font-family:var(--fuente-titular);
  font-size:2.3em;
  float:left;
  line-height:.82;
  padding:3px 8px 0 0;
  color:var(--granate-claro);
}
.panel:not(:has(#zona-teclado)) .instruccion::first-letter{ color:var(--granate); }

.objetivo{
  position:relative;
  margin:18px 0 26px;
  padding:20px 4px;
  border-top:1px solid var(--crema-linea);
  border-bottom:1px solid var(--crema-linea);
  text-align:left;
}
.objetivo-texto{
  font-family:var(--fuente-display);
  font-size:clamp(34px, 6vw, 68px);
  line-height:1.05;
  color:var(--crema);
  letter-spacing:.01em;
}
.paso{ font-style:italic; opacity:.75; margin-top:8px; font-size:16px; }
.aviso-nota{ min-height:26px; color:var(--oro-claro); font-style:italic; margin-top:6px; font-size:16px; }
.nombre-acorde{
  min-height:26px; font-variant:small-caps; letter-spacing:.05em;
  color:var(--crema-suave); font-size:16px;
}
.nombre-acorde.grande{
  font-family:var(--fuente-display);
  font-size:clamp(40px, 8vw, 90px);
  text-align:left; margin:22px 0; color:var(--crema);
  font-variant:normal;
}

/* ------------------------------------------------------------------ */
/* Teclado en pantalla — capas escalonadas + brillo, reconstruido desde  */
/* los SVG de referencia sin depender de imágenes ni JS adicional.      */
/* ------------------------------------------------------------------ */
.teclado{
  position:relative;
  display:flex;
  height:clamp(100px, 15vw, 150px);
  margin-top:18px;
  padding:12px 8px 0;
  border:1px solid rgba(122,15,34,.35);
  border-radius:6px;
  background:linear-gradient(to bottom, #050403, #0f0c0a);
  box-shadow:0 18px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  overflow:hidden;
}
.tecla.blanca{
  flex:1;
  position:relative;
  margin-right:2px;
  background:linear-gradient(to bottom, #ffffff 0%, #fbf7ee 38%, #eee5d0 78%, #ddd0b2 100%);
  border-radius:0 0 9px 9px;
}
.tecla.blanca:last-child{ margin-right:0; }
.tecla.blanca .etiqueta{
  position:absolute; bottom:10px; left:0; right:0;
  text-align:center; font-size:13px; color:var(--tinta-suave); opacity:.6;
  pointer-events:none;
}
.tecla.negra{
  position:absolute; top:10px; z-index:2;
  height:66%;
  box-sizing:border-box;
  border-radius:0 0 8px 8px;
  border:3px solid #797a7d;
  background:
    linear-gradient(to right, transparent 0%, transparent 10%, #c9cbce 10%, #c9cbce 19%, transparent 19%, transparent 100%),
    #060606;
  box-shadow:0 8px 12px rgba(0,0,0,.55);
  transform:translateX(-50%);
}
.tecla.negra::before{
  content:'';
  position:absolute; top:0; left:8%; right:8%; height:22%;
  background:#aeb1b4; opacity:.55;
  border-radius:0 0 50% 50%;
  pointer-events:none;
}
.tecla.blanca.objetivo{ background:linear-gradient(to bottom, #fff9ec 0%, #f6e9c9 40%, #e8d19c 80%, #d9bd80 100%); }
.tecla.blanca.objetivo::after{
  content:'';
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%;
  background:var(--oro);
  box-shadow:0 0 6px rgba(179,135,46,.6);
}
.tecla.blanca.objetivo .etiqueta{ opacity:0; }
.tecla.negra.objetivo{ border-color:var(--oro); }
.tecla.negra.objetivo::before{ background:var(--oro-claro); opacity:.8; }

/* Ejercicios de dos manos: la mano izquierda se tiñe de granate, la derecha
   se queda en el dorado de siempre — mismo mecanismo que .objetivo, solo cambia
   el color del punto para poder distinguir de un vistazo qué mano toca qué. */
.tecla.blanca.objetivo-izq::after{ background:var(--granate); box-shadow:0 0 6px rgba(122,15,34,.5); }
.tecla.negra.objetivo-izq{ border-color:var(--granate-claro); }
.tecla.negra.objetivo-izq::before{ background:var(--granate-claro); opacity:.85; }
.tecla.activa.blanca{ background:linear-gradient(to bottom, var(--oro-claro), var(--oro)); }
.tecla.activa.negra{ border-color:var(--oro-claro); }
.tecla.activa.negra::before{ background:var(--oro-claro); opacity:1; }

/* ------------------------------------------------------------------ */
/* Resultado                                                           */
/* ------------------------------------------------------------------ */
.velo{
  position:fixed; inset:0; z-index:10;
  background:rgba(12,10,8,.72);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:veloEntra .2s ease;
}
.tarjeta-resultado{
  position:relative;
  background:var(--papel);
  border:1px solid var(--tinta);
  padding:34px 32px;
  text-align:center;
  max-width:420px;
  animation:tarjetaEntra .35s cubic-bezier(.2,.8,.3,1);
}
.estrellas-grandes{ font-size:40px; color:var(--granate); letter-spacing:.2em; margin-bottom:10px; }
.tarjeta-resultado .boton{ margin:6px; }

@keyframes veloEntra{ from{ opacity:0; } to{ opacity:1; } }
@keyframes tarjetaEntra{ from{ opacity:0; transform:scale(.94) translateY(10px); } to{ opacity:1; transform:scale(1) translateY(0); } }

/* ------------------------------------------------------------------ */
/* Garageband                                                           */
/* ------------------------------------------------------------------ */
.tarjeta-gb{
  border-top:1px solid var(--linea-fuerte);
  padding:20px 2px;
}
.tarjeta-gb h3{
  margin:0 0 6px;
  font-family:var(--fuente-titular);
  font-weight:normal;
  font-size:22px;
  color:var(--tinta);
}
.tarjeta-gb .descripcion{ font-style:italic; opacity:.8; }
.tarjeta-gb ol{ padding-left:22px; }
.tarjeta-gb li{ margin-bottom:8px; }
.tarjeta-gb li::marker{ color:var(--granate); }

/* ------------------------------------------------------------------ */
/* Fundamentos                                                         */
/* ------------------------------------------------------------------ */
.subtitulo-seccion{
  font-family:var(--fuente-titular);
  font-weight:normal;
  font-variant:small-caps;
  letter-spacing:.12em;
  color:var(--tinta-suave);
  margin:30px 0 12px;
  font-size:16px;
  display:flex; align-items:center; gap:10px;
}
.subtitulo-seccion::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(to right, var(--linea-fuerte), transparent);
}
.subtitulo-seccion:first-of-type{ margin-top:8px; }
.tarjeta-fundamento{
  border-top:1px solid var(--linea);
  padding:16px 2px;
}
.tarjeta-fundamento h3{
  margin:0 0 6px;
  font-family:var(--fuente-titular);
  color:var(--tinta);
  font-weight:normal;
  font-size:19px;
}
.tarjeta-fundamento p{ margin:0; }

/* ------------------------------------------------------------------ */
/* Aviso flotante                                                       */
/* ------------------------------------------------------------------ */
.aviso{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--tinta);
  color:var(--papel);
  padding:12px 22px;
  z-index:20;
  font-size:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  max-width:88vw;
  text-align:center;
  animation:veloEntra .2s ease;
}

@media (max-width:600px){
  .cabecera{ padding:26px 20px 20px; }
  #vista{ padding:30px 18px 48px; }
  .panel:has(#zona-teclado){ margin:-30px -18px 0; padding:24px 18px 34px; }
  .ficha-perfil{ width:calc(50% - 12px); min-width:150px; }
}

@media (prefers-reduced-motion:reduce){
  .velo, .tarjeta-resultado, .aviso, .nodo.actual circle{ animation:none; }
}