/* ============================================================
   ABOUT: la ficha-sintetizador. En reposo se ven los stats y la
   onda decorativa; con .oscillator aparece el sinte, de arriba abajo:
   potes (onda y filtro) · presets / efectos en pestañas · el teclado
   de una octava con sus negras y el cambio de octava · volumen y el
   chip de la cancion. Arriba, el osciloscopio cruza la pantalla y se
   toca como un theremin.
   El JS que lo mueve esta en js/about.js y js/synth.js.
   ============================================================ */
.osc-about {
    padding: 0; /* la onda y el osciloscopio van de lado a lado */
}
.osc-inner {
    width: 100vw;
    max-height: 92vh;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 24px 0;
}
.osc-inner::-webkit-scrollbar { display: none; }
.osc-about:not(.hidden) .osc-inner { animation: oscAboutIn 0.3s ease; }
@keyframes oscAboutIn { from { opacity: 0; transform: translateY(16px); } }

.oscab { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.oscab-head { text-align: center; }
.oscab-name { font-size: clamp(48px, 9vw, 96px); line-height: 0.9; color: var(--highlight); text-shadow: 3px 3px 0 #000; }
.oscab-role { font-size: clamp(18px, 2.6vw, 26px); }

/* onda decorativa (reposo) ↔ osciloscopio en vivo, ambos a pantalla completa */
.oscab-wave {
    display: flex; align-items: flex-end; justify-content: space-between;
    width: 100vw; padding: 0 10px; height: 60px;
}
.oscab-bar { width: 5px; height: 100%; background: var(--highlight); transform-origin: bottom; animation: oscabWave 1.1s ease-in-out infinite; }
@keyframes oscabWave { 0%, 100% { transform: scaleY(0.18); } 50% { transform: scaleY(1); } }
.oscab-scope { display: none; width: 100vw; height: 140px; touch-action: none; }
.oscab.oscillator .oscab-wave { display: none; }
.oscab.oscillator .oscab-scope { display: block; }

/* ficha: los tres stats, solo en reposo */
.oscab-desk { display: flex; gap: clamp(16px, 4vw, 46px); align-items: flex-end; padding: 10px 0; }
.oscab.oscillator .oscab-desk { display: none; }
.oscab-fader { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; }
.oscab-track { position: relative; width: 10px; height: 180px; background: rgba(255, 255, 255, 0.14); }
.oscab-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--highlight); transform-origin: bottom; animation: oscabFill 0.5s ease-out; }
@keyframes oscabFill { from { transform: scaleY(0); } }
.oscab-knob { position: absolute; left: 50%; width: 30px; height: 14px; background: #fff; transform: translate(-50%, 50%); box-shadow: 0 0 0 3px #000; }
.oscab-flbl { font-size: 14px; color: var(--dim); text-align: center; line-height: 1.15; }

/* ===== Bloques del sinte =====
   solo agrupan; los rotulos se quitaron a proposito, el sinte se lee solo */
.oscab-block { display: none; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.oscab.oscillator .oscab-block { display: flex; }

/* teclado de una octava, de do a do: las blancas en fila y las negras
   encima, cada una en su hueco (--n = cuantas blancas quedan a su izquierda) */
.oscab-piano {
    --kw: clamp(34px, 5vw, 52px);
    --kh: clamp(104px, 13vw, 136px);
    position: relative;
    touch-action: none; user-select: none;
}
.oscab-blancas { display: flex; }
.oscab-key {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 3px; padding-bottom: 7px; line-height: 1;
    transition: transform 0.06s ease, background 0.06s ease;
}
.oscab-key.blanca {
    width: var(--kw); height: var(--kh);
    background: #f2f0e6; color: #14141f;
    box-shadow: inset 0 0 0 2px #000, 0 4px 0 #000;
}
.oscab-key.negra {
    position: absolute; top: 0; z-index: 2;
    left: calc(var(--kw) * var(--n) - var(--kw) * 0.32);
    width: calc(var(--kw) * 0.64); height: calc(var(--kh) * 0.62);
    background: #14141f; color: #f2f0e6;
    box-shadow: inset 0 0 0 2px #000, 0 4px 0 #000;
}
.oscab-key-n { font-size: clamp(12px, 1.5vw, 15px); }
.oscab-key.negra .oscab-key-n { display: none; }   /* no cabe: solo la letra */
.oscab-key-k { font-size: 12px; opacity: 0.5; text-transform: uppercase; }
.oscab-key:focus-visible { outline: 3px solid var(--highlight); outline-offset: -3px; }
.oscab-key.blanca.on, .oscab-key.blanca:active { background: var(--highlight); transform: translateY(3px); }
.oscab-key.negra.on, .oscab-key.negra:active { background: var(--highlight); color: #14141f; transform: translateY(3px); }
.oscab-key.on .oscab-key-k, .oscab-key:active .oscab-key-k { opacity: 0.75; }

/* subir y bajar la octava (tambien con las teclas Z / X) */
.oscab-oct { display: flex; align-items: center; gap: 10px; }
.oscab-octbtn {
    font-size: 16px; line-height: 1; padding: 4px 10px 6px;
    color: var(--text); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
    transition: color 0.15s ease, transform 0.15s ease;
}
.oscab-octbtn:hover:not(:disabled), .oscab-octbtn:focus-visible { color: var(--highlight); transform: scale(1.08); outline: none; }
.oscab-octbtn:disabled { opacity: 0.28; cursor: default; }
.oscab-octlbl { font-size: 15px; color: var(--dim); }
.oscab-octn { color: var(--highlight); font-weight: normal; }

/* pestañas: presets o efectos, nunca los dos a la vez */
.oscab-tabs { display: flex; gap: 6px; }
.oscab-tab {
    font-size: 18px; line-height: 1; padding: 4px 18px 6px;
    color: var(--dim); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
    transition: color 0.15s ease;
}
.oscab-tab:hover, .oscab-tab:focus-visible { color: var(--highlight); outline: none; }
.oscab-tab.on {
    background: var(--highlight); color: #000; box-shadow: none;
    clip-path: polygon(0 12%, 97% 0, 100% 90%, 3% 100%);
}
.oscab-panel { display: flex; justify-content: center; width: 100%; }
.oscab-panel.hidden { display: none; }

/* presets: un clic y suena otra cosa */
.oscab-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 12px; }
.oscab-preset {
    font-size: 21px; line-height: 1; padding: 4px 16px 6px;
    color: var(--text); box-shadow: inset 0 0 0 2px var(--highlight);
    transform: rotate(-1deg); transition: transform 0.15s ease, color 0.15s ease;
}
.oscab-preset:nth-child(even) { transform: rotate(1.2deg); }
.oscab-preset:hover, .oscab-preset:focus-visible { color: var(--highlight); transform: scale(1.08) rotate(-2deg); outline: none; }
.oscab-preset.on {
    background: var(--highlight); color: #000; box-shadow: 3px 3px 0 #000;
    clip-path: polygon(0 12%, 97% 0, 100% 90%, 3% 100%);
}

/* potenciometros: solo en modo oscilador */
.oscab-pots { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 6vw, 80px); }
.oscab-pot { display: flex; flex-direction: column; align-items: center; gap: 8px; width: clamp(104px, 28vw, 140px); }
.oscab-dial {
    position: relative; width: 74px; height: 74px; border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #2a2a2a, #0d0d0d 70%);
    box-shadow: inset 0 0 0 3px var(--highlight), 0 3px 0 #000;
    transform: rotate(var(--a, 0deg)); transition: transform 0.12s ease;
    cursor: ns-resize; touch-action: none;
}
.oscab-tick { position: absolute; left: 50%; top: 7px; width: 4px; height: 24px; background: var(--highlight); transform: translateX(-50%); }
.oscab-plbl { font-size: 15px; color: var(--dim); }
.oscab-pval { font-size: 19px; color: var(--highlight); text-align: center; line-height: 1.1; }

/* modulos: el nombre enciende el efecto, los "···" abren sus ajustes */
.oscab-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 12px; }
.oscab-modwrap { display: inline-flex; align-items: stretch; }
.oscab-mod {
    font-size: 19px; line-height: 1; padding: 5px 15px 7px;
    color: var(--text); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.32);
    transition: transform 0.15s ease, color 0.15s ease;
}
.oscab-mod:hover, .oscab-mod:focus-visible { color: var(--highlight); transform: translateY(-2px) rotate(-1.5deg); outline: none; }
.oscab-mod.on { background: var(--highlight); color: #000; box-shadow: none; clip-path: polygon(0 12%, 97% 0, 100% 90%, 3% 100%); }
.oscab-modset {
    font-size: 17px; line-height: 1; padding: 5px 9px 9px; margin-left: 3px;
    color: var(--dim); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
    transition: color 0.15s ease, transform 0.15s ease;
}
.oscab-modset:hover, .oscab-modset:focus-visible { color: var(--highlight); transform: translateY(-2px); outline: none; }

/* volumen y cancion: solo en modo oscilador */
/* en movil no cabe todo en una linea: que se parta en vez de salirse */
.oscab-vol { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 0 12px; }
.oscab-vbtn {
    font-size: 26px; line-height: 1; width: 34px; height: 34px;
    color: var(--text); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    transition: color 0.15s, transform 0.15s;
}
.oscab-vbtn:hover, .oscab-vbtn:focus-visible { color: var(--highlight); transform: scale(1.12); outline: none; }
.oscab-vmeter { display: inline-flex; gap: 4px; }
.oscab-vseg { width: 9px; height: 20px; background: rgba(255, 255, 255, 0.18); }
.oscab-vseg.on { background: var(--highlight); }

/* mismo chip que el "sound" del home (aqui .controls no aplica, se repite el look) */
.oscab-chip {
    font-size: 20px; line-height: 1; padding: 2px 14px 4px; margin-left: 8px;
    color: var(--text-window); opacity: 0.45;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    transform: rotate(2.5deg); transition: transform 0.15s ease;
}
.oscab-chip.on {
    opacity: 1; background: var(--highlight); color: #000; text-shadow: none;
    clip-path: polygon(0 14%, 96% 0, 100% 88%, 4% 100%);
}
.oscab-chip:hover, .oscab-chip:focus-visible { transform: rotate(2.5deg) scale(1.12); outline: none; }

.oscab-osc-btn {
    font-size: 22px; color: #000; background: var(--highlight);
    padding: 6px 20px; transform: rotate(-1deg);
    box-shadow: 3px 3px 0 #000; transition: transform 0.15s ease;
}
.oscab-osc-btn:hover, .oscab-osc-btn:focus-visible { transform: rotate(-2deg) scale(1.06); outline: none; }

/* ===== Modal de cada modulo ===== */
.oscab-modal {
    position: fixed; inset: 0; z-index: 70;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 4, 14, 0.72); padding: 20px;
}
.oscab-modal.hidden { display: none; }
.oscab-modal-box {
    width: min(420px, 92vw);
    background: #0b0b16;
    box-shadow: 0 0 0 3px var(--highlight), 6px 6px 0 rgba(0, 0, 0, 0.7);
    padding: 14px 18px 18px;
    animation: oscabModalIn 0.18s ease-out;
}
@keyframes oscabModalIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
.oscab-modal-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; color: var(--highlight); font-size: 28px; line-height: 1;
}
.oscab-modal-title { flex: 1; }
.oscab-modal-close { font-size: 30px; line-height: 1; padding: 0 6px; color: var(--text); }
.oscab-modal-close:hover, .oscab-modal-close:focus-visible { color: var(--highlight); outline: none; }

/* ON/OFF del efecto en la cabecera del modal */
.oscab-modal-onoff {
    font-size: 17px; line-height: 1; padding: 4px 13px 6px;
    color: var(--dim); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
    transition: transform 0.15s ease;
}
.oscab-modal-onoff:hover, .oscab-modal-onoff:focus-visible { color: var(--highlight); transform: scale(1.08); outline: none; }
.oscab-modal-onoff.on {
    background: var(--highlight); color: #000; box-shadow: none;
    clip-path: polygon(0 12%, 97% 0, 100% 90%, 3% 100%);
}
.oscab-modal-onoff.hidden { display: none; }

.oscab-prow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* el nombre en cristiano y debajo, chiquitito, como se llama en un sinte */
.oscab-pname { flex: 0 0 128px; font-size: 17px; line-height: 1.05; color: var(--text); }
.oscab-pname em {
    display: block; font-style: normal; font-size: 13px;
    color: var(--dim); opacity: 0.75;
}
.oscab-pnum { flex: 0 0 84px; text-align: right; font-size: 17px; color: var(--highlight); }
.oscab-prange {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 10px; background: rgba(255, 255, 255, 0.16); outline: none;
}
.oscab-prange::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 8px; height: 20px; background: var(--highlight); box-shadow: 0 0 0 2px #000;
}
.oscab-prange::-moz-range-thumb {
    width: 8px; height: 20px; border: none; border-radius: 0;
    background: var(--highlight); box-shadow: 0 0 0 2px #000;
}

/* en movil el nombre + barra + numero en una linea deja la barra en nada:
   el nombre se sube encima y la barra se queda con todo el ancho */
@media (max-width: 430px) {
    .oscab-prow { flex-wrap: wrap; row-gap: 2px; }
    .oscab-pname { flex: 1 1 100%; }
    .oscab-pname em { display: inline; margin-left: 6px; }
    .oscab-pnum { flex: 0 0 76px; }
}

/* ===== Ficha de contacto =====
   la misma ficha que el about pero sin sinte: un parrafo con el enlace del
   correo dentro. El contenido se edita en la clave "contacto" de data.json */
.osc-contacto .oscab { gap: 24px; }

.oscab-texto {
    max-width: min(680px, 88vw);
    padding: 0 8px;
    font-size: clamp(21px, 3vw, 30px);
    line-height: 1.35;
    text-align: center;
    color: var(--text);
}

/* la palabra que abre el correo: pegatina amarilla, como el resto de la web */
.oscab-mail {
    display: inline-block;
    padding: 1px 12px 3px;
    color: #000;
    background: var(--highlight);
    text-decoration: none;
    transform: rotate(-1.5deg);
    clip-path: polygon(0 12%, 97% 0, 100% 90%, 3% 100%);
    transition: transform 0.15s ease;
}

.oscab-mail:hover,
.oscab-mail:focus-visible {
    outline: none;
    transform: rotate(1.5deg) scale(1.06);
    box-shadow: 3px 3px 0 #000;
}