.klang-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    width: 1184px;
    height: 564px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--gris) 0%, var(--gris-oscuro) 100%);
    padding: 2px;
    box-shadow: 12px 12px 20px rgba(0, 0, 0, 0.35);
}

.klang-body {
    width: auto;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--gris-claro) 0%, var(--gris) 100%);
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: flex-end;
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.8);
    padding: 12px;
    gap: 12px;
}

.sound-slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;  
    position: relative;
    height: 16px;
    width: 172px;

}

.icon-volume {
    width: 24px;
    height: 24px;
    z-index: var(--z-index-icons);
}

/*layout*/

.klang-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    padding: var(--space-200);
    gap: var(--space-200);
    width: 100%;
    height: 100%;
    background: var(--negro-principal);
    border-radius: 8px;

}

/*zonas*/

.zone {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-200);
    width: 100%;
}

.zone-a {
    height: 140px;
}

.zone-b {
    height: 140px;
}

.zone-c {
    height: 212px;
    align-items: stretch;
}

/*módulos*/

/*wordmark*/
.module[data-module="wordmark"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--space-200);
}

.module[data-module="wordmark"] .wordmark-frame {
    grid-column: 1 / -1;
}

/*ondas*/
.module[data-module="waves"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--space-200);
}

.module[data-module="waves"] img {
    width: 32px;
}


/*presets*/

.module[data-module="presets"] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--space-200);
}

/*filtros*/

.module[data-module="filter"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--space-200);
}

.module[data-module="filter"] .filter-frame {
    grid-column: 1 / -1;
}

/*zona c*/

/*bpm + play + stop + octavas */

.module[data-module="transport"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--space-200);
}

.module[data-module="transport"] .bpm-frame {
    grid-column: 1 / -1;
}

/*keyboard*/

.module[data-module="keyboard"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-200);
    overflow: hidden;
    height: 100%;
}

.keys-container {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: var(--space-200);
    width: 100%;
}

.white-keys {
    height: var(--big-key-length);
}